4

我们正在为我们的项目使用 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.

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

谢谢

4

2 回答 2

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;
  },
于 2012-09-23T11:51:54.933 回答
2

您需要获取Marionette.Async插件。它旨在完全按照您的意愿行事。

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

最好一次获取尽可能多的模板，以减少网络延迟和传输。我的一个朋友写了一篇关于这样做的博客文章。

于 2012-09-26T02:46:53.677 回答