{{tag>templates java-script javascript "2-way binding"}}

====== Rivets.js (2-way binding) ======

  * http://rivetsjs.com/

Применяется для двустороннего маппинга javascript ajax(json) response на поля формы.
Содержит дополнительную привязку к Sightglass для поддержки Observable.

===== 5.x =====

==== Документация / Статьи ====

  * http://blog.bugz.ru/posts/rabota-s-formami-v-backbone

===== 6.x =====

==== Документация / Статьи ====

  * https://habrahabr.ru/post/262351/
  * https://github.com/whayler1/rivets-example

==== Примеры использования ====

  * http://wmdmark.github.io/backbone-rivets-example/
  * http://bl.ocks.org/mikeric/3345763
  * http://stackoverflow.com/questions/12868566/how-to-bind-deeper-than-one-level-with-rivets-js
  * http://azproduction.ru/rivets-backbone-adapter/example/index.html
  * https://github.com/shapkarin/music-search

===== Databindig =====

==== Примеры ====

  * http://tsareg.github.io/Data-binding-for-Backbone.js/samples/

==== Описание ====

==== Backbone ====

<code html>
<p>First Name: <input type="text" rv-value="model:firstName"></p>
<p>Last Name: <input type="text" rv-value="model:lastName"></p>
<p>Full Name: <span rv-text="view.fullName < model:firstName model:lastName"></span></p>
</code>

<code javascript>
// Adapter
rivets.adapters[':'] = {
    observe: function(obj, keypath, callback) {
        obj.on('change:' + keypath, callback)
    },
    unobserve: function(obj, keypath, callback) {
        obj.off('change:' + keypath, callback)
    },
    get: function(obj, keypath) {
        return obj.get(keypath)
    },
    set: function(obj, keypath, value) {
        obj.set(keypath, value)
    }
};

var RivetsView = Backbone.View.extend({
    template: $("script[type='text/template']").html(),
    fullName: function() {
        return this.model.get("firstName") + " " + this.model.get("lastName");
    },
    render: function () {
        this.$el.html(this.template);
        rivets.bind(this.$el, { model: this.model, view: this });
        return this;
    }
});

var model = new Backbone.Model({firstName: "Luke", lastName: "Skywalker"}),
    view = new RivetsView({model: model, el: $("#container")});

view.render();
</code>