从自定义函数返回ajax响应作为html到骨干视图

Return ajax response as html to Backbone View from custom function

本文关键字：html 视图 自定义函数 返回 ajax 响应      更新时间：2023-09-26

我试图用它的渲染方法在主干视图中渲染部分视图。我创建了一个辅助工具来做这件事。

var DashboardPartial = (function(){
    var _getPartialView = function() {
        $.ajax({
          url: _baseUrl + _url,
        })
        .done(function(response) {
          _returnView(response);
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    };
    var _returnView = function (response) {
       return response;
    };
    return  {
      get: function (url) {
        _url = url;
        _baseUrl = '/dashboard/';
        _getPartialView();
      },
    };
}());

所以，我想做的是调用DashboardPartial.get('url')并在backbone View渲染方法中使用响应。如下所示:

render: function() {
    partial = DashboardPartial.get('url');
    this.$el.html(partial); 
    return this;
}

问题是该函数确实从服务器获得部分，但我找不到返回响应的方法。在DashboardPartial函数中做console.log(response)确实显示了部分，但我希望能够返回它，然后将其作为变量传递给"this.$el.html()"。

您应该返回deferred($。Ajax在默认情况下返回它)从helper:

var DashboardPartial = (function(){
    var _getPartialView = function() {
        return $.ajax({
          url: _baseUrl + _url,
        });
    };
    return  {
       get: function (url) {
         _url = url;
         _baseUrl = '/dashboard/';
         return _getPartialView();
       },
    };
}());

然后在渲染中使用它:

render: function() {
    var self = this,
        dfd = $.Deferred();
    DashboardPartial.get('url').done(function(partial){
        self.$el.html(partial);
        dfd.resolve();
    });
    return dfd; // use this outside, to know when view is rendered; view.render().done(function() { /* do stuff with rendered view */});
}

然而，你可以使用requires来完成这个任务，再加上requires -text插件来加载模板，因为你的视图依赖于partial。

据我所知，您希望使用一个骨干视图呈现不同的部分。

你可以像这样创建工厂:

var typeToTemplateMap = {};
typeToTemplateMap["backboneViewWithFirstPartial"] = firstPartial;
function(type) {
   return typeToTemplateMap[type];
}

然后在视图中使用它:

initialize: function(options) {
    this.partial = partialFactory(options.type);
},
render: function() {
    this.$el.html(this.partial);
    return this;
}

下面是使用requires:

的样子
// factory.js
define(function(require) {
    var partialOne = require("text!path/to/partialOne.htm"), // it's just html files
        partialTwo = require("text!path/to/partialTwo.htm");
   var typeToPartialMap = {};
   typeToPartialMap["viewWithFirstPartial"] = partialOne;
   typeToPartialMap["viewWithSecondartial"] = partialTwo;
   return function(type) {
       return typeToPartialMap[type];
   }
});
// view.js
define(function(require){
   var Backbone = require("backbone"), // this paths are configured via requirejs.config file.
       partialFactory = require("path/to/factory");
   return Backbone.View.extend({
       initialize: function(options) {
           this.partial = partialFactory(options.type);
       },
       render: function() {
            this.$el.html(this.partial);
            return this;
       }
   });
});
// Another_module.js, could be another backbone view.
define(function(require) {
   var MyView = require("path/to/MyView"),
       $ = require("jquery");
   var myView = new MyView({type: "firstPartial"});
   myView.render(); // or render to body $("body").append(myView.render().$el);
});

你应该考虑使用requires，因为你做的几乎是一样的，但是没有依赖处理。

需求文档可以在这里找到:http://requirejs.org/docs/start.html

相关文章：