Backbone.Marionette 模板异步加载答案

【问题标题】：Backbone.Marionette Template Loading AsynchronouslyBackbone.Marionette 模板异步加载
【发布时间】：2012-09-15 01:03:39
【问题描述】：

我们在项目中使用 Backbone 和 Backbone.Marionette。我们目前正在服务器上存储视图的所有模板，并且我们已经覆盖了 loadTemplate 调用以异步加载它们。

但是，当我们使用布局视图时，由于视图的模板是异步加载的，我们似乎无法立即访问布局的区域。下面是一个例子：

var layoutView = new Layout();
var itemView = new ItemView();

App.containerRegion.show(layoutView);
layoutView.mainRegion.show(itemView); <---- This is where the issue would occur.

如果我们不从服务器异步加载模板，那么它会正常工作。什么是实现这一点的好方法？我们希望将模板保留在服务器上，而不是一次加载所有内容。我们还希望避免在整个代码中绑定到布局视图的渲染事件。

谢谢

【问题讨论】：

标签： backbone.js jquery-templates marionette backbone-events backbone-views

【解决方案1】：

您需要获取Marionette.Async 插件。它旨在完全满足您的需求。

但是，您需要知道从服务器异步抓取模板会影响性能。这样做的网络延迟可能会导致用户认为应用程序没有响应，如果屏幕上没有任何内容告诉他们应用程序正在幕后工作（如微调器图形）。

最好一次获取尽可能多的模板，以减少网络延迟和传输。 a blog post that a friend of my wrote 正是这样做的。

【讨论】：

【解决方案2】：

我认为你必须重写 Marionette.ItemView 的渲染函数，在这里你首先加载模板数据并在成功加载模板时渲染视图：

  render: function(){          
    if (this.beforeRender){ this.beforeRender(); }

    this.trigger("before:render", this);
    this.trigger("item:before:render", this);

    var data = this.serializeData();
    var templateSrc = this.getTemplate();

    $.ajax({
      url: 'templatesFolder/' + templateSrc,
      success: _bind(function(template){
         var html = Marionette.Renderer.render(template, data);
         this.$el.html(html);

         if (this.onRender){ this.onRender(); }
         this.trigger("render", this);
         this.trigger("item:rendered", this);
      }, this)
    })

    return this;
  },

【讨论】：