MarionetteJS:仅在获取模型成功后渲染

Posted

技术标签:

【中文标题】MarionetteJS:仅在获取模型成功后渲染【英文标题】:MarionetteJS: Render only after fetch model success 【发布时间】:2013-04-30 07:43:04 【问题描述】:

如何在 Marionette 中获取模型之前推迟渲染?我可以收听模型上的更改事件,但它会被渲染两次。有没有优雅的解决方案?

Manager.module 'Views', ( Views, App, Backbone, Marionette, $) ->
    class UserDetail extends Marionette.ItemView
        template: 'manager.users.detail'


        initialize: =>
            @model = new App.Models.ManagerUser( )
            return

        onBeforeRender: =>
            @username = 'test' # Comes from URL
            @model.fetch()
            return

        serializeData: ->
            data = @model.toJSON()
            return data

【问题讨论】:

【参考方案1】:

一种常见的方法是从控制器而不是视图调用 fetch。这使您可以避免在视图中处理路由事件。

这是一个演示该技术的小提琴。

http://jsfiddle.net/puleos/phpCz/

编辑:(小提琴更新)

Mod.metaModel = new metaModel();
Mod.tagsCollection = new tagsCollection();

Mod.compositeView = new CompositeView(
    model: Mod.metaModel,
    collection: Mod.tagsCollection
);    

var metaPromise = Mod.metaModel.fetch(dataType: "jsonp");
var tagsPromise = Mod.tagsCollection.fetch(dataType: "jsonp");

metaPromise.done(function(data) 
    App.region.show(Mod.compositeView);
);

【讨论】:

在没有串行获取或竞争条件的情况下实现一次成功的并行获取的一种非常好的方法是使用 $.when ,如对类似问题的回答中所述:***.com/a/12168628/271868

以上是关于MarionetteJS:仅在获取模型成功后渲染的主要内容,如果未能解决你的问题,请参考以下文章

仅在验证成功时渲染组件

ajax获取数据后怎么去渲染到页面

React Native 中获取后的条件渲染

如何在基于模块的文件夹结构上使用 marionettejs

仅在初始渲染后反应 CSS 动画

React Native this.setState() 仅在再次与组件交互后重新渲染