Backbone.Marionette模板异步加载

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

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

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

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

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

感谢

来源

2012-09-23 user1691932

我认为你必须重写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-23 11:51:54

您需要抓住Marionette.Async插件。它是为了完成你想要的。

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

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

来源

2012-09-26 02:46:53

Backbone.Marionette模板异步加载

回答

相关问题