1

I am following David Sulc's tutorial on Marionette. http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/ and in order to learn extending over it.

Now lets say each cat has a name, rank as well as Category

AngryCat = Backbone.Model.extend({
   urlRoot: '/api/cats',
   defaults: {
          name: "New Cat Name",
          category: "Red Cat"
  }
});

Now I want to make a composite view like this:

Category 1: Red Cat (03 Cats)

Cat 1

Cat 2

Cat 3

Category 2: Blue Cat (02 Cats)

Cat X

Cat Y

How can I achieve this. Please help!

dcarson
  • 2,853
  • 1
  • 25
  • 34
Devesh Kumar
  • 1,009
  • 1
  • 17
  • 29
  • Is your rank a number? – dcarson Jul 05 '13 at 06:14
  • Yes it is a number. And man you changed my question entirely to the way you wanted to answer. I mean I wanted to create a MARIONETTE COMPOSITE VIEW from that. And now how do I render? or how will the view. I know groupby method of backbone, I wanted to enquire how to use it more on front end. And by the way, my question never had to deal with Rank. I mean I never how to categorise according to rank. – Devesh Kumar Jul 05 '13 at 09:47
  • I changed the question because I thought it was what you were trying to ask. Your question was difficult to understand and it's title suggested you wanted to be able to group and sort. You gave no marionette code as example of what you tried so I interpreted the question from what you stated. Maybe you could open another question specifically focused on marionette composite views with code examples? – dcarson Jul 05 '13 at 10:32

2 Answers2

8

You can use the groupBy function to group your AngryCat models by their by category property, then use sortBy to sort each group individually by its rank (I am assuming your model has a property named rank that is a number). I also assume you have an intial collection variable named angryCats that contains your models. 

var groups = angryCats.groupBy(function(ac) {
    return ac.get("category");
});

groups.each(function(group, key) {

     // This will output the category name & item count
     console.log(key + " " + group.length + " items"); 

     group.sortBy(function (model) {
         return model.get("rank");
     });

     group.each(function(model) {
         // This will output the model name
         console.log(model.get("name")); 
     });

});

Additionally, if your wanted to sort each group by a string property of the model, such as the name property, you'll need to create a new locally scoped angryCats collection out of each group (the groups are arrays), then sort each collection by using a comparator as the linked question outlines.

Hope this helps

Community
  • 1
  • 1
dcarson
  • 2,853
  • 1
  • 25
  • 34
2

You can probably achieve what you want to do by combining dcarson's code with my blog post on nested views: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

You need to provide a collection of groups to the composite view. The composite view's item views will be a collection view displaying the cats in that group (i.e. what is done in the linked blog post).

David Sulc
  • 25,946
  • 3
  • 52
  • 54