Backbone.js视图，ParentView，模型，集合和模板最佳实践

Question

我正在寻找有关Backbone中视图和模型/集合的最佳做法的描述。 我知道如何向集合中添加模型，使用模板渲染视图以及在父视图中使用视图，但是我正在寻找更多上下文以及一些示例链接。

我已经更新了这个问题，使其更加具体。

假设您拥有更多具有各种变化形式的网格布局，这些布局从同一集合中提取。 您将在此处创建此页面做什么？ 在父视图中重复的简单子视图将不起作用，因为网格项的变化太大。 你呢：

• 创建大量的微小视图和集合，并使用相关集合将所有这些不同的视图呈现到该页面中？
• 创建一个包含循环的复杂模板文件，当您遍历循环时，循环会输出不同的标记？
• 人们是否将多个视图都放在同一模型的父视图中？

同样，人们是否将不同的模型混合到同一父视图中？ 例如电影和电视节目-这些不同的模型，可以将它们添加到呈现该列表的同一收藏集中吗？

谢谢！

Answer 1

你问的好问题。 要回答这个问题，请换个角度看一下：

在我的经验中，我通常先检查父视图上是否有任何逻辑，例如排序，验证，搜索等。 第二-具有模型的集合或仅具有数组作为属性的模型：模型是独立的并且可能不存在集合而存在，例如您有导航项，并且没有必要像您将要为集合那样为每个项和导航创建单独的模型永远不要使用物品本身。 另一种情况是您有用户列表。 您可能会在很多地方使用用户模型，最好为用户和集合创建单独的模型以将其组合在一起。

您关于UL的案例可以使用具有li数组的单个模型和items属性来解决，简单的网格可能具有相同的方法，因为我从您的描述中看不到某些特殊的逻辑。

但我应该指出-我的任务很艰巨，即使用从服务器解析的集合来构建Mansory网格，项目是模型，因为它具有不同的数据结构，不同的模板和不同的事件侦听器。

做出我考虑的决定：

• 项目作为独立图块，可以在网格中使用，也可以独立使用。
• 项目是模型+模板+视图。 不同的模型类型有助于支持不同的数据结构，不同的视图类型有助于支持不同的事件侦听器和用户交互，以及不同的模板-差异外观。
• 收集作为获取初始数据的工具+加载额外的项目+布置砌体视图+根据获取的结果创建模型。

UPDATE

让我们将此伪代码视为masnonry实现：

模型可能如下所示：

var MansonryModel = Backbone.Model.extend({
        /* Common methods and properties */
    }),

    MansonryVideoModel = MansonryModel.extend({
        defaults: {
            type: 'video',
            videoUrl: '#',
            thumbnail: 'no-cover.jpg'
        }
    }),

    MansonryImageModel = MansonryModel.extend({
        defaults: {
            type: 'image',
            pictureUrl: '#',
            alt: 'no-pictire'
        }
    });

var MansonryCollection = Backbone.Collection.extend({
    model: MansonryModel
});

视图可能是这样的：

var MansonryTileView = Marionette.ItemView.extend({
        /* place to keep some common methods and properties */
    }),

    MansonryVideoTile = MansonryTileView.extend({
        template: '#video-tile',
        events: {
            'click .play': 'playVideo'
        },
        playVideo: function(){}
    }),

    MansonryImageTile = MansonryTileView.extend({
        template: '#image-tile',
        events: {
            'click .enlarge': 'enlargePicture'
        },
        enlargePicture: function(){}
    });

var MansonryListView = Marionette.CollectionView.extend({
    childView : MansonryItem
})

希望这个帮助