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

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

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

假设你有一个更多的网格布局，有各种各样的变化，它们来自同一个集合。要创建此页面，您将在此处执行什么操作？在父视图中重复的简单子视图将不起作用，因为网格项的变化太大。你是否：

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

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

---

谢谢

你问了一个好问题。为了回答这个问题，让我们从另一个角度来看一下：

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

您的UL案例可能通过单一型号和

项目
属性以及
li
数组解决，简单网格可能采用相同的方法，因为我在您的描述中没有看到包装上的一些特殊逻辑

但我应该指出，我有一个非常重要的任务，就是用从服务器解析的集合构建ManStory网格，项目是模型，因为它有不同的数据结构、不同的模板和不同的事件监听器

在作出决定时，我考虑如下：


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

更新

让我们考虑这个伪代码作为MasnRy实现：
模型可能如下所示：

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
})

希望这有帮助
Re:“你能不能不只是拥有一个包含逻辑的模板，然后在你的视图中循环整个集合”，哪段代码会拥有该模板？哪段代码负责响应集合中的
“添加”
或
“删除”
事件？当然，父视图可以告诉它的子视图使用什么模板，或者类似地，将它的子视图放入父控件控制的容器中，这些容器可以根据自己的需要定位和调整大小。也许一个更具体的例子会有所帮助。@muistoshort是的，我认为你的例子确实对模板部分有所帮助。我猜这个例子是一个网页，其中的内容块都来自同一个模型，但显示方式不同。重要的是它们在这些模板中以特定的顺序显示。那么，首先是特色区域，等等。您如何构建该视图？具有多个不同类型子视图的父视图？还是别的？你的回答涉及到我感兴趣的事情。如果你有更多的细节，我想知道。因此，从一开始-如果父视图没有逻辑，您就不创建逻辑了？现在，对于更大的问题——如果你有一个网格列表（比如你提到的砖石）：如果你有不同的网格项目布局（比如里面有一个额外的div），你在这里做什么？是否有多个子视图？或者您有模板逻辑吗？如果父视图没有逻辑，并且不需要使用集合-我使用ItemView+Model。如果以导航为例，它将是NavigationModel和属性项+NavigationView，并在该数组上迭代。因此，只有一个视图具有您需要的模板。其次，关于mansonry，使用一些基本视图作为所有类型的父视图是有意义的，并使用自定义模板和事件侦听器对其进行扩展。这里需要使用父视图，因为您需要将其委托给构建mansonry布局，因为单个平铺无法完成任务-那么，人们是否使用具有多个子视图的基本父视图呢？对每个网格项使用不同的子视图？不同的型号呢？有这样的例子吗？请检查答案更新。BaseView是所有其他项目视图的“原型”，模型的结构相同感谢您的帮助