Question

我尝试使用它的渲染方法在骨干视图中渲染局部视图。我创造了一种帮助来做到这一点。

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（＆＃39; url＆＃39;）并使用Backbones View渲染方法中的响应。如下所示：

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

问题是该函数确实从服务器获取了部分内容，但我无法找到返回响应的方法。在DashboardPartial函数中执行console.log（响应）会显示部分，但我希望能够返回它，然后将其作为变量传递给＆＃34; this。$ el.html（）＆＃34;。

Answer 1

你应该从helper返回deferred（$ .ajax默认返回）：

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 */});
}

但是，你可以使用requirejs加上requirejs-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;
}

这就是使用requirejs的样子：

// 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);
});

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

有关requirejs的文档可在此处找到：http://requirejs.org/docs/start.html

将ajax响应作为html从自定义函数

1 个答案: