Skip to content

Latest commit

 

History

History
48 lines (32 loc) · 1.53 KB

File metadata and controls

48 lines (32 loc) · 1.53 KB

Backbone.CollectionBinder

This library offers an easy way to bind models in a collection to a view.

All you have to do is instantiate a CollectionBinder, passing in the view, collection and template for each model. Any items in the collection will automatically be bound (and drawn) and any added or removed items will be added or removed from the respective element.

var binder = new CollectionBinder(myView, collection, '<p><a class="label" data-id="<%= name %>"><%= name %></a></p>');

Binding is handled by adding an attribute to the top level element in the template.

#Example:

define ['backbone', 'underscore','cs!collectionbinder'], (Backbone, _, CollectionBinder) ->
    Backbone.View.extend
        el: "#here"

        initialize: () ->
            collect = Backbone.Collection.extend()
            @collection = new collect()
            @binder = new CollectionBinder(@, @collection, '<p><a class="label" data-id="<%= name %>"><%= name %></a></p>')
            @binder.bind()

        events:
            "click #add" : "add"
            "click .label" : "remove"

        template: '<input type="text" id="newLabel"></label><a id="add">add</a><br/><br/>'

        render: () ->
            @$el.html _.template @template

        add: () ->
            @collection.add
                name: Backbone.$("#newLabel").val()

        remove: (e) ->
            models = @collection.where
                name: Backbone.$(e.currentTarget).data "id"

            @collection.remove models[0]