1

我决定进入 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 库进一步阅读视图吗？

4

2 回答 2

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 文档实际上非常棒。有问题的功能可以在这里找到。

于 2013-07-08T23:06:28.340 回答
1

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

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

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

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

于 2013-07-08T20:49:51.407 回答