📜 ⬆️ ⬇️

MVbind - Backbone extension for data binding between Model and View

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

Backbone MVbind


GitHub link
The extension weighs just over 1kb.
How does MVbind differ 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 a binding, you need to expand 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 into 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 searching. And I searched about a year ago, then I wrote this extension. Now they explained to me in the comments that adequate things had appeared. But I think another extension will not hurt anyone :)

Source: https://habr.com/ru/post/226843/


All Articles