Backbone - Single Active Model

Backbone - Single Active Model

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div class="js-container"></div>

<script type="text/template" id="item-template">
    <button <% if (model.get('isActive')) { %> class="active" <% } %>>
        <%- model.get('name') %>
    </button>
</script>

CSS

button.active {
    color: red;
}

JavaScript

var data = [
    {
        "color": "blue",
        "name": "Johnny"
    },
    {
        "color": "green",
        "name": "Melissa"
    },
    {
        "color": "yellow",
        "name": "Bill"
    }
];

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

var TheCollection = Backbone.Collection.extend({
    model: TheModel,
    
    initialize: function() {
        this.on('change:isActive', this.ensureSingleActive, this);
    },
    
    ensureSingleActive: function(current) {
        if(current.get('isActive') ) {
        
            var previous=   _.find(this.models, function(model) {
                return model != current && model.get('isActive') 
            });
        
            if (previous) {
                previous.set('isActive', false);   
            } 
        }
    }
});



var ListView = Backbone.View.extend({
    el: '.js-container',
    
    tagName: 'ul',
    
    render: function() {
        this.collection.each(function(item) {
            var listItemView = new ListItemView({model: item});
            this.$el.append(listItemView.el);
        }, this);
    } 
});

var ListItemView = Backbone.View.extend({
    
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.render();
    },
    
    tagName: 'li',
    
    template: _.template( $('#item-template').html() ),
    
    render: function() {
        var temp = this.template({model: this.model});
        
        this.$el.html( temp );
    },
    
    events: {
        'click': 'toggleActive'   
    },
    
    toggleActive: function(e) {
        this.model.set('isActive', true);

    }
});

var theCollection = new TheCollection(data);
var listView = new ListView({collection: theCollection});
listView.render();