Backbone + Marionette + Rails 中第三张唱片的不同样式

Question

我决定进入 Backbone 竞技场，在搜索了 BB 和 Marionette 的文档后，我在看似简单的事情上遇到了一些麻烦。

我只是想自定义第三条记录上显示的内容。

这就是我将如何使用 Rails 来做到这一点

    <% @posts.each_with_index do |post, i| %>
      <% if i == 1 || i == 7 || i == 14 %><!-- 1st, 7th, & 14th record -->
        display title, description & something else
      <% else %><!-- other records -->
        display only title
      <% end %>
    <% end %>

使用 Backbone + Marionette + Underscore，我的记录显示如下： 控制器

        postsRegion: (posts) ->
            postsView = @getPostsView posts

            postsView.on "childview:posts:post:clicked", (child, post) ->
                App.vent.trigger "posts:post:clicked", post

            @layout.postsRegion.show postsView

        getPostsView: (posts) ->
            new List.Posts
                collection: posts

查看

   class List.Post extends App.Views.ItemView
        template: "posts/list/_post"
        tagName: "li"
        className: "span4 item"

        events:
            "click" : -> @trigger "posts:post:clicked", @model

如何使第 1、7 和 14 条（或仅第三条）记录显示不同的内容？另外，作为一名设计师，任何人都可以建议任何关于视图的进一步阅读使用这个 js 库？

Answer 1

在您的集合视图中，您应该能够根据索引将选项传递给项目视图，如下所示：

MyCollectionView = Backbone.Marionette.CollectionView.extend({
  itemView : MyItemView,
  itemViewOptions : function (model, index) {
    if (index % 3 == 0) {
      return { specialValue : "foo" };
    } else {
      return {};
    }
  }
};
MyItemView = Backbone.Marionette.ItemView.extend({
  onRender : function () {
    if (this.options.specialValue) {
      // DO SOMETHING SPECIAL
    }
  }
};

Marionette 文档实际上非常棒。有问题的函数可以是found here。

Answer 2

您可能会遇到此类行为的问题：Marionette 集合视图为集合中的每个模型呈现一个项目视图。反过来，这些项目视图仅根据模型中的数据调整显示的内容（即渲染的模板）。

如果您想每隔 7 项突出显示一次，我会看到以下选项：

• 将 jQuery/javascript 代码添加到 onRender 方法以设置这些行的样式（最简单，但可能对大型集合有性能影响）
• 如果渲染视图的数量（通过 jQuery 选择器获得）可以被 7 整除（参见 https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-appendhtml）或使用外部计数器（例如在查看）
• 定义您自己的视图以接收集合，为每个项目呈现子视图并将其附加到 DOM（基本上使用普通 Backbone，并重新实现 Marionette 概念）

总而言之，您将面临一场艰苦的战斗，如果您可以将模型属性用于造型目的，那么使用 Marionette 后您的生活会轻松很多。请注意，此模型属性不必保留在服务器上...