Backbone / Marionette ItemView 策略答案

【问题标题】：Backbone / Marionette ItemView strategyBackbone / Marionette ItemView 策略
【发布时间】：2013-08-15 10:08:32
【问题描述】：

我正在建立一个网站，其中包含一个有一些特点的博客。这是一种类似 tumblr 的体验，其中有不同的帖子类型：

Facebook 帖子
报价
文章
研究

这些帖子有一些共同的属性，例如id、title、post_date、post_url_slug，但有些帖子有post_image 或post_external_link。这完全取决于post_type，它可以保存facebook、quote、article 等值。在渲染Marionette.CollectionView 时确定它是哪种类型以及选择完全不同的模板或在我的模板中使用下划线的任意 javascript 在模板中处理这个？任何意见将不胜感激。

谢谢！

【问题讨论】：

标签： backbone.js marionette collectionview

【解决方案1】：

绝对不要将逻辑放在视图模板中。这将导致痛苦、苦难、仇恨和黑暗面。 :P

您可以覆盖 CollectionView 或 CompositeView 上的getItemView 方法，并使用它来确定您想要的视图类型。 https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.collectionview.js#L122


var Stuff = Marionette.CollectionView.extend({
  // ...,

  getItemView: function(item){
    var type = item.get("whatever_field");
    var viewType;
    if (type === "some value"){
      viewType = SomeViewType;
    } else {
      viewType = AnotherViewType;
    }
    return viewType;
  }
});

【讨论】：

这样你可以在视图中有不同的行为，不仅是不同的模板，并且避免视图中的事件只对一个类型有意义，或者更糟糕的是，每个事件中的一堆 if 语句处理程序根据类型具有不同的实现。我的 2 美分...
我认为该解决方案只是在不需要的地方添加了更多代码行。一个 itemview 处理一个模型，在你需要一个不同的模型之前，行为会有多不同？如果它只是具有不同事件和 HTML 片段的相同模型，那么您绝对应该使用具有不同模板的相同 ItemView。如果您正确执行选择器，则将忽略不适用于每种模型类型的事件。
是否可以在答案中做同样的事情，但不是使用 switch case，而是在 getItemView 方法中使用 requirejs 来拉入返回正确 ItemView 的相应文件？我已经尝试过了，但似乎存在时间问题，getItemView 在 itemView 的 require 语句可以返回视图以在方法中返回之前执行并返回 undefined 。只是想知道是否有其他人尝试过同样的方法并成功了。

【解决方案2】：

你应该有一个ItemView，不需要覆盖CollectionView的getItemView。 ItemView 应该负责决定要使用的模板，这就是 getTemplate 的用途。它应该是这样的：

var MyItemView = Marionette.ItemView.extend({
    getTemplate: function() {
        var template;
        switch(this.model.get('type')) {
            case 'facebook':
                template = 'Template for Facebook type';
                break;
            case 'quote':
                template = 'Template for Quote type';
                break;
            case 'article':
                template = 'Template for Article type';
                break;
        }
        return template;
    }
});

这样一来，您拥有的一个模型只有一个 ItemView，并且渲染决定应该留给模板。

【讨论】：

【解决方案3】：

您可以在 ItemView 初始化函数中处理此问题并在那里切换模板。只要您打算跨帖子类型使用相同的事件

【讨论】：

嗯，事件是相同的，但细节视图的链接可能并不适用于所有项目。不过这应该不是问题吧？