Data-Binding using Backbone.Stickit
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://rawgithub.com/josscrowcroft/accounting.js/master/accounting.js"></script>
<script src="https://rawgithub.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<!--Editor View Template-->
<script type="text/template" id="editor-template">
<div class = "well span4">
<fieldset>
<legend>Editor</legend>
<form>
<label for="firstName"> First Name :</label>
<input type = "text" name = "firstName" placeHolder = "First Name" />
<label for="lastName"> Last Name :</label>
<input type = "text" name = "lastName" placeHolder = "Last Name" />
<label for="fullName"> Full Name :</label>
<input type = "text" name = "fullName" placeHolder = "Full Name" />
<label for="salary"> Salary :</label>
<input type = "text" name = "salary" placeHolder = "Salary" />
<label for="pro"> Professional :</label>
<input type = "checkbox" name = "pro" >
<label for="favSearch"> Fav Search Engine :</label>
<input type="text" name="favSearch" placeholder="for eg: http://www.google.com"/>
</form>
</fieldset>
</div>
</script>
<!--Viewer View Template-->
<script type="text/template" id="viewer-template">
<div class = "well span4" >
<fieldset>
<legend> Preview </legend>
<form>
<label for="firstName">First Name: </label>
<label name = "firstName" > </label><br/>
<label for="lastName">Last Name: </label>
<label name = "lastName" > </label><br/>
<label for="fullName">Full Name: </label> ...
CSS
body {
padding : 20px;
}
div {
margin-right : 10px;
}
JavaScript
$(function () {
//create a instance of Backbone Model with some default values.
var BaseViewModel = new Backbone.Model();
BaseViewModel.set({
"firstName": "Nik",
"lastName": "Kul",
"salary": "",
"pro": true,
"fullName": ""
});
//create a Backbone view
var BaseView = Backbone.View.extend({
close: function () {
//when view closes, call unstickit to unbind Model bindings
this.unstickit();
},
render: function () {
//when the view is rendered
//get the templated id from passed in options
//NOTE: templateId is not a property of Backbone or Backbone Stickit, its a custom parameter that we pass into view's constructor
var templateId = "#" + this.options.templateId;
//construct the template
var template = _.template($(templateId).html());
var templateHTML = template();
//append it to current view
this.$el.html(templateHTML);
//call stickit to apply view model bindings
this.stickit(this.model,this.options.bindings);
return this;
},
//create a converter function, that formats the
//given value as money, for example 123 gets converted to
//$123.00, used by the money input.
salaryConverter : function(value,options){
return value;
}
});
// bindings for editor view:
// firstName attribute on the model to element with name property set to firstName.
// lastName attribute on the model to element with name property set to lastName.
// salary attribute on the model to element with name property set to salary, also set the onGet function so that the value is formatted as money.
// favSearch attribute on the model to element with name property set to favSearch.
var editorViewBindings = {
'[name = "firstName"]' : "firstName",
'[name = "lastName"]' : "lastName",
'[name = "fullName"]': {
observe: ['fullName', 'firstName', 'lastName'],
onGet: ([fullName, firstName, lastName]) => {
return firstName + ' ' + lastName
},
onSet:...