1. 首页
  2. 问题列表
  3. 从自定义函数将ajax响应作为html返回到主干视图
提问者：小点点

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


我正在尝试使用其渲染方法渲染主干视图中的部分视图。我创建了一种帮助器来实现这一点。

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。获取（'url'）并在Backbones视图呈现方法中使用响应。如下所示：

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

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


共1个答案

匿名用户

您应该从helper返回延迟（$.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文本插件来加载模板，因为您的视图依赖于partial。

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

您可以创建工厂smth，如下所示：

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

这就是使用需求的样子：

// 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的文档可在以下位置找到：http://requirejs.org/docs/start.html

相关问题