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

Question

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

我已将此问题更新为更具体。

假设您有一个包含各种变化的网格布局，这些变化来自同一个集合。你会在这里做什么来创建这个页面？在父视图中重复的简单子视图将不起作用，因为网格项的变化太大。你：

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

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

谢谢！

Answer 1

你问的问题很好。要回答这个问题，让我们从另一个角度来看看：

在我的 exp 上，我首先检查父视图上是否有任何逻辑，如排序、验证、搜索等。第二 - 具有模型的集合或仅具有数组作为属性的模型：模型是独立的并且可能在没有集合的情况下存在，例如您有导航项，并且没有任何意义为每个项目创建单独的模型并将导航作为集合作为您将永远不要使用项目本身。另一种情况是您有用户列表。你可以在很多地方使用用户模型，最好为用户和集合创建一个单独的模型来组合它。

您的 UL 案例可以通过单个模型和 items 属性以及 li 数组来解决，简单网格可能具有相同的方法，因为我没有从您的描述中看到一些特殊的包装逻辑。

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

做出我认为如下的决定：

• 作为独立平铺的项目，可以在网格中使用，也可以独立使用。
• 项目是模型+模板+视图。不同的模型类型有助于支持不同的数据结构，不同的视图类型有助于支持不同的事件监听器和用户交互，不同的模板 - 不同的外观。
• collection 作为获取初始数据的工具 + 加载额外的项目 + 排列 mansonry 视图 + 根据获取的结果创建模型。

更新

让我们将这个伪代码视为 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
})

希望有帮助