Keeping models in sync with other objects such as views can be challenging, and if it is not done correctly, it can lead to messy code. In this chapter, we will explore how to deal with data synchronization to make data binding easier. But, what is data binding? Wikipedia defines data binding as:
Data binding is the process that establishes a connection between the application UI (User Interface) and business logic. If the settings and notifications are correctly set, the data reflects changes when made. It can also mean that when the UI is changed, the underlying data will reflect that change.
A common issue with model binding is how to deal with complex model structures that include other embedded objects or lists; in this chapter, we will define a strategy to deal with these scenarios. A missing feature in Backbone is two-way binding; in the next sections, we will see how to implement this without a headache.
Let's start the chapter describing how to bind model data with views manually to see how Backbone works; after that, we can use Backbone.Stickit to make it much easier. After learning how to sync model data and views, we will explore how to perform validations on the models and how to display error messages.
To make it simple, imagine that we have a form with a simple layout: name, phone, and an email address:
<script id="form-template" type="text/template"> <form> <div class="form-group"> <label for="name">Name</label> <input id="name" class="form-control" type="text" value="<%= name %>" /> </div> <div class="form-group"> <label for="phone">Name</label> <input id="phone" class="form-control" type="text" value="<%= phone %>" /> </div> <div class="form-group"> <label for="email">Name</label> <input id="email" class="form-control" type="text" value="<%= email %>" /> </div> <button type="submit"class="btn btn-default">Save now</button> </form> </script> <script id="preview-template" type="text/template"> <h3><%= name %></h3> <ul> <li><%= phone %></li> <li><%= email %></li> </ul> </script>
In the snippet, we have two views that will be rendered at the same time. When the user clicks on the Save button in the form, the preview template will be updated with the model data:
'use strict';
var contact = new Backbone.Model({
name: 'John Doe',
phone: '555555555',
email: '[email protected]'
});
class FormView extends ModelView {
constructor(options) {
super(options);
this.template = '#form-template';
this.model = contact;
}
}
class ContactPreview extends ModelView {
constructor(options) {
super(options);
this.template = '#preview-template';
this.model = contact;
// Re-render the view if something in the model
// changes
this.model.on('change', this.render, this);
}
}
var form = new FormView({
el: '#contact-form'
});
var preview = new ContactPreview({
el: '#contact-preview'
});
form.render();
preview.render();This code will render the contents of the contact model in the form and in the preview. When the Save now button is clicked, nothing happens because it hasn't yet been programmed, so let's save the changes in the model:
var FormView = ModelView.extend({
// ...
events() {
return {
'click button[type="submit"]': 'saveContact'
};
}
saveContact(event) {
event.preventDefault();
this.model.set('name', this.$('#name').val());
this.model.set('phone', this.$('#phone').val());
this.model.set('email', this.$('#email').val());
}
});Let's see what's happening here. In FormView, we're updating the model with the data in the form inputs; this action syncs the form data with the model, triggering a 'change' event on the Model. Because ContactPreview is listening for the change, the event will update itself with the data in the model.
Backbone is not built with automagic view-model bindings, so it's the developer's responsibility to implement it. Fortunately, there are some Backbone plugins that can help us to make it less painful; one of these is Backbone.Stickit, developed by the New York Times.