page.js | |
---|---|
This file contains the backbone model and view used in the example page. | |
A function to load templates from html. In a Rails application, these would be
in jst files that are made available in the front end in the JST variable.
For this standalone app, they are defined in the html in a
| var templates = {};
function load_templates() { |
templates are underscore templates defined in script elements with type 'text/html'. | scripts = document.getElementsByTagName('script');
_.each(scripts, function(script) {
if (script && script.innerHTML && script.id && (script.type === "text/html" )) { |
compile the template with underscore and store it. | templates[script.id] = _.template(script.innerHTML);
}
})
} |
We now define a Backbone model and a view. | |
Contact model | var Contact = Backbone.Model.extend({ }); |
Contact view | var ContactView = Backbone.View.extend({
tagName: 'div',
events: {
'click #submit_contact_form': 'save'
},
initialize: function() { |
Set the template for this view. | this.template = templates['contact_template'];
},
render: function() { |
render the template with the model passed in during view creation. | $(this.el).empty();
$(this.el).append(this.template({contact: this.model}));
return this;
}, |
empty save function. | save: function(event) {
event.preventDefault();
console.log('save called');
}
}); |
DataJSON that represents contact data (that would normally come from the server). | var data = {
id: 1,
first_name: 'John',
last_name: 'Smith',
email: 'jsmith@example.com',
about: 'a description for this user account',
street_1: '123 California Way',
street_2: '',
city: 'San Francisco',
state: 'California',
country: 'US',
zip: '94111',
is_admin: true, |
errors hash that contains an error for the email field | errors: {
'email': 'An account with this email address already exists',
'street_2': 'Street 2 cannot be empty'
}
};
var countries = [
{name: 'United States', value: 'US'},
{name: 'Canada', value: 'CA'},
{name: 'Mexico', value: 'MX'}
];
my_err_fn = function(model) {
var errors = model.get('errors');
var attrs = model.toJSON();
var s = '<h3 class="field-error-message">Errors found!</h3>';
s += '<ol>';
var err_str = _.reduce(_.keys(attrs), function(s, attr) {
var tmp = ''
if (!_.isUndefined(errors[attr])) {
tmp = s + '<li class="field-error-message">' +
errors[attr] + '</li>';
} else {
tmp = s;
}
return tmp;
}, s);
s += '</ol>';
return err_str;
}
BackboneFormHelper.init({
errorPlacement: 'top',
errorFnTop: my_err_fn,
errorFieldClass: 'field-with-error',
errorLabelClass: 'field-error-message',
wrapper: '<li>'
}); |
Render the viewOn document load, render the view. | $(document).ready(function() {
|
load the templates. | load_templates();
|
Create contact views with json data | var view = new ContactView({model: new Contact(data)});
|
render the contact | $('#form-container').append(view.render().el);
});
|