Rendering third-party plugins
A common issue when rendering views is not rendering plugins from others because they are designed to work with traditional web applications but not with SPA; this is because many plugins are DOM-dependent, which means that the target element should exist in the actual DOM. To see this issue more clearly, let me show you an example with the jQueryUI Calendar plugin. Let's add a birthdate field to our ContactEditor, replacing the age field.
// index.html
// ...
<div class="form-group">
<label for="birthdate">Birth date</label>
<input id="birthdate " type="text"
class="form-control" value="<%= birthdate %>" />
//...And make the proper changes in the view:
class ContactForm extends ModelView {
// ...
serializeData() {
return _.defaults(this.model.toJSON(), {
name: '',
birthdate: '',
// ...
});
},
saveContact(event) {
event.preventDefault();
this.model.set('name', this.$el.find('#name...