Different styling on the third record in Backbone

问题:

I've decided to step into the Backbone arena & after searching through BB's & Marionette's doc, I'm having a little trouble with something seemingly simple.

I'm simply trying to customize what's being display on the third record.

Here's how I would do it just using 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 %>

Using Backbone + Marionette + Underscore, here's how my records are displayed: controller

        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

view

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

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

How do I make the the 1st, 7th, & the 14th (or just the third) record display something different? Also, being more of a designer, could anyone suggest any further readings on views using this js library?

回答1:

In your collection view, you should be able to pass options to item views based on index like follows:

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

The Marionette docs are actually really awesome. The function in question can be found here.

回答2:

You're likely going to run into issues with this type of behavior: Marionette collection views render an item view for each model in the collection. These item views, in turn, only adapt what is displayed (i.e. the rendered template) according to data in the model.

If you want to highlight every 7th item, I'd see the following options:

• Add jQuery/javascript code to an onRender method to style those rows (easiest, but might have performance implications with large collections)
• Rewrite the collection/composite view's appendHtml to style the element if the number of rendered views (obtained via jQuery selector) is divisible by 7 (see https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-appendhtml), or by using an external counter (e.g. defined on the view)
• Define your own view to receive a collection, render a child view for each item and attach it to the DOM (basically using plain Backbone, and reimplementing Marionette concepts)

All in all, you'll be facing an uphill battle, and your life will be MUCH easier with Marionette if you could instead use a model attribute for the styling purposes. Note that this model attribute wouldn't have to be persisted on the server...