Backbone.js 如何设计MarionetteJS ItemView以正确显示加载消息？

首先，我是一个木偶

在获取ItemView时，我无法使其显示加载消息或抖动。当从主干网历史记录中的深层链接显示此ItemView时（即，ItemView是自用户直接链接到应用程序后显示的应用程序的第一页），这一问题尤其严重。我想指出页面正在加载（获取），最好是使用一个简单的视图，然后使用获取的模型显示真正的模板化视图

我已经看到了其他的答案，比如Marionette.async（已经被弃用）和在ItemView.initalize（）期间更改模板

有人（Derrick？）有什么建议或最佳实践吗

更新：

我使用collection.get（id）从集合中获取模型，而不是直接使用model.fetch（）

考虑到这一点，真正的问题是应该在哪里实施：

我可以更改控制器以查看集合中是否存在模型（以及集合是否已加载），并决定相应地显示哪个视图。这似乎到处都是样板，因为这可能发生在任何ItemView和任何控制器上

我可以将ItemView初始化更改为测试模型（和加载的集合）是否存在，但这里的注释相同：每个ItemView都可能有此问题

更新2： 这就是我的最终结果，以防其他人需要此解决方案：

app.ModelLayout = Backbone.Marionette.Layout.extend({  
    constructor: function(){  
        var args = Array.prototype.slice.apply(arguments);    
        Backbone.Marionette.Layout.prototype.constructor.apply(this, args);    
        // we want to know when the collection is loaded or changed significantly    
        this.listenTo(this.collection, "reset sync", this.resetHandler);    
    },    
    resetHandler: function () {    
        //  whenever the collection is reset/sync'ed, we try to render the selected model    
        if (this.collection.length) {    
            // when there is no model, check to see if the collection is loaded and then try to get the    
            // specified id to render into this view    
            this.model = this.collection.get(this.id);    
        }    
        this.render();    
    },    
    getTemplate: function(){    
        // getTemplate will be called during render() processing.  
        // return a template based on state of collection, and state of model    
        if (this.model){    
            // normal case: we have a valid model, return the normal template    
            return this.template;    
        } else if (this.collection && this.collection.isSyncing) {    
            // collection is still syncing, tell the user that it is Loading    
            return this.loadingView;    
        } else {    
            // we're not syncing and we don't have a model, therefore, not found    
            return this.emptyView;    
        }    
    }    
});    

下面是如何使用它：

// display a single model on a page
app.Access.Layout.CardLayout = app.ModelLayout.extend({
    regions: {
        detailsRegion:"#detailsRegion",
        eventsRegion:"#eventsRegion"
    },
    template:"CardLayout",  // this is the normal template with a loaded model
    loadingView:"LoadingView",  // this is a template to show while loading the collection
    emptyView:"PageNotFoundView",  // this is a template to show when the model is not found
    onRender : function() {  
        this.detailsRegion.show( blah );  
        this.eventsRegion.show( blah );  
    }
});

谢谢

用于项目视图

我认为可以在初始化函数中添加微调器，我非常喜欢spin.js，因为它非常容易使用，而且可以在Itemview的onRender函数中隐藏微调器

对于CollectionView

在CollectionView中，您可以这样处理它

看看德里克发布的解决方案。。

用于项目视图

我认为可以在初始化函数中添加微调器，我非常喜欢spin.js，因为它非常容易使用，而且可以在Itemview的onRender函数中隐藏微调器

对于CollectionView

在CollectionView中，您可以这样处理它

看看德里克发布的解决方案。。

---

我建议使用jQuery延迟：

开始提取数据，并存储返回值（这是jQuery的承诺）

实例化您的内容视图

显示您的加载视图

当承诺完成时，显示包含内容的视图

我在我的博客上谈到了实现这种技术：

Rayweb_on链接的解决方案的问题是，当集合为空时（即，不只是在提取时），将显示加载视图。此外，

ItemView

没有

emptyView

属性，因此它无论如何都不适用于您的案例

更新：

根据您更新的问题，您应该仍然能够通过动态指定要使用的模板来应用该概念：

---

然后，当/如果成功获取数据，则在视图中触发重新渲染器。

我建议使用jQuery延迟：

开始提取数据，并存储返回值（这是jQuery的承诺）

实例化您的内容视图

显示您的加载视图

当承诺完成时，显示包含内容的视图

我在我的博客上谈到了实现这种技术：

Rayweb_on链接的解决方案的问题是，当集合为空时（即，不只是在提取时），将显示加载视图。此外，

ItemView

没有

emptyView

属性，因此它无论如何都不适用于您的案例

更新：

根据您更新的问题，您应该仍然能够通过动态指定要使用的模板来应用该概念：

---

然后，当/如果成功获取数据，则在视图中触发重新渲染。

在发布问题之前，我实际上查看了您的一篇博客文章。它没有直接回答我的问题，因为我使用get（id）从集合中获取模型。我将更新我的问题以反映这一点。在发布问题之前，我实际上看了你的一篇博客文章。它没有直接回答我的问题，因为我使用get（id）从集合中获取模型。我将更新我的问题以反映这一点。感谢微调器函数的推荐。显示微调器不是问题的核心，而是知道何时显示什么视图以及在何处交换视图。感谢微调器函数的引用。显示微调器不是问题的核心，而是知道何时显示什么视图以及在何处交换视图。