JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.stickit/0.6.3/backbone.stickit.min.js"></script>
<div id="foo">
<p>First name:<input id="firstName"/></p>
<p>Last name:<input id="lastName"/></p>
<h2>Hello, <span id="fullName"></span>!</h2>
</div>
JavaScript
var FooView = Backbone.View.extend({
bindings: {
'#firstName': 'firstName',
'#lastName': 'lastName',
'#fullName': {
observe: ['firstName', 'lastName'],
onGet: function (values) {
return values[0] + ' ' + values[1];
}
}
},
initialize: function () {
},
render: function () {
this.stickit();
return this;
}
});
var fooModel = new Backbone.Model();
fooModel.set({
firstName: 'Taro',
lastName: 'Yamada'
});
var fooView = new FooView({
model: fooModel,
el: $('#foo')
});
fooView.render();