backbone.js collection view example using marionette template

后端 未结 1 782
佛祖请我去吃肉
佛祖请我去吃肉 2021-02-04 05:31

Can you please suggest me some example for showing list view through marionette template system. Basically, I have a marionette template and based on the template i am creating

1条回答
  •  长情又很酷
    2021-02-04 05:56

    To create a list of table rows with Backbone Marionette you'll need to define five things:

    • A model for each row
    • A collection to hold all the row models
    • A CollectionView to iterate through the collection
    • An ItemView to provide row-specific functionality
    • A template for the ItemView that provides the markup for each row

    Sample Use Case

    Say you have the following data:

    var stooges = [{ name: 'moe', age: 44, userid: 1}, 
                   { name: 'larry', age: 44, userid: 2}, 
                   { name: 'curly', age: 44, userid: 3}];
    

    Define a model and collection

    For the following data you'd want to have a model:

    var StoogeModel = Backbone.Model.extend({});
    

    where you can set up some sensible defaults for your data and other properties, like idAttribute. There are plenty of references on how to customize your model. Your collection should, at minimum, take the stoogeModel.

    var StoogeCollection = Backbone.Collection.extend({
      model: StoogeModel
    });
    

    Set up your views

    To iterate and render your collection into a table, all you'll need is a CollectionView and an ItemView.

    var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
      tagName: "table",
      childView: StoogeItemView
    });
    

    All CollectionViews need at minimum a childView which is an ItemView (which we define below) that they will use to derive the functionality to create the html for each row, and a collection which is the collection holding the models that populate each row. We'll pass this collection in when we instatiate astoogesCollectionView. The tagName property tells Backbone to encapsulate the children in a table tag.

    var StoogeItemView = Backbone.Marionette.ItemView.extend({
      tagName: "tr",
      template: '#stooge-template'
    });
    
    
    

    All ItemViews require a template which we define in our HTML document, here it's #stooge-template. If the ItemView is a child of a collection you don't have to define its model, it will be provided by the parent CollectionView. The HTML rendered by each child StoogeItemView will be encapsulated by tr tags, because what we want is a row for each child of the collection view.

    From the ItemView you can handle events at the "row" level, like click or focus on a row column. You can also handle changes to the model that was passed in. Additionally, from the ItemView you could decide to pass in helpers that can manipulate the way data is displayed in its template.

    Putting it all together

    Now we have defined our model, collection, collection view, child item view, and the item view template. Next, we'll connect all these pieces.

    Populate your collection

    You pass in the array of stooges to the constructor of your collection.

    var myStooges = new StoogeCollection(stooges);
    

    These are shaped into models, and they load your collection.

    Rev up your CollectionView

    You pass your loaded collection to your collection view.

    var myStoogesView = new StoogesCollectionView({ collection: myStooges  });
    

    Render your view

    All Marionette views come packaged with a render method. In our case, invoking

    myStoogesView.render();
    

    will create a

    with three elements each with a column each for the name, age, and userid fields in our dataset. To insert the resulting HTML in the DOM we simply use the view's el property. For simplicty, we can inject the view straight into the body

    document.body.appendChild(myStoogesView.el);
    

    or using jQuery:

    $(document.body).append(myStoogesView.el);
    

    Beyond this example

    There is much functionality that we didn't even begin to discuss. Read the docs! And check out the many many tutorials. Hope this brief intro helps!

    0 讨论(0)
    提交回复
    热议问题