MVbind - Backbone extension for data binding between Model and View

    image
    Recently I really wanted a two-way data binding for myself between the model and the view in Backbone. Unfortunately, I have not found anything adequate. I had to write my extension. I share it with you.

    Backbone mvbind


    Link to GitHub The
    extension weighs a little over 1kb.
    How is MVbind different from Epoxy.js , Rivets.js , Backbone.DataBinder , Backbone.ModelBinder ? He is extremely simple. I just made the necessary functionality for myself, without overloading it with anything. Just another extension for data binding.

    How to use it?


    The module is easy to use. To add binding, you need to extend the Backbone.View object with the bind property.

    var User=Backbone.Model;
    var View=Backbone.View.extend({
        initialize:function(){
            this.mvbind() // Инициализируем байндинг. В момент вызова элементы уже должны быть загружены в DOM.
        },
        bind:{
            'input.name':'name' // Слева - jQuery cелектор элемента в DOM. Справа имя свойства модели.
        }
    })
    $(function(){
        var user=new User({name:'Jack'});
        var view=new View({model:user});
        /* Ваш input будет автоматически иметь значение Jack. 
         *Если вы внесете в нем изменения, то они тут же отразятся в модели. И наоборот.*/
    }) 
    


    Original data source


    By default, during initialization, the first data is taken from the model and copied to the view. This behavior can be changed by calling

    this.mvbind({source:'view'});
    

    In this case, initially the data will be taken from the view.

    UPD . I wrote above that I did not find anything adequate, but I did not forget to clarify when I was looking. And I searched about a year ago, then I wrote this extension. Now in the comments they explained to me that adequate things appeared. But I think one more extension will not hurt anyone :)

    Also popular now: