Backbone: Show validation errors for each model in a collection on VIEW
I'm working on a Backbone application where I allow the user to Add multiple items.
Here's my Model:
//Model
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
},
validate: function (attr, options) {
var error = '';
//console.log(attr);
if(attr.part2 == "world1"){
this.trigger('err:world1');
error = 'world 1 error';
}
if(attr.part2 == "world3"){
this.trigger('err:world3');
error = 'world 3 error';
}
}
});
Collection:
//Collection
var List = Backbone.Collection.extend({
model: Item,
validateModels: function() {
var cloneCollection = this.clone();
var errorModels = this.filter(function(m) {
if (!m.isValid()) {
return m;
}
});
// cloneCollection.remove(errorModels);
return cloneCollection;
}
});
I allow a user to Add/Delete items from the view as:
//Item View
var ItemView = Backbone.View.extend({
tagName: 'li', // name of tag to be created
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
this.model.on('err:world1', this.world1Err);
this.model.on('err:world3', this.world3Err);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span> <span class="error" style="color:red; font-family:sans-serif;"></span>');
return this; // for chainable calls, like .render().el
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
},
world1Err: function(){
alert('World 1 Err');
//console.log(this);
},
world3Err: function(){
alert('World 3 Err');
}
});
//Composite View
var ListView = Backbone.View.extend({
el: $('body'), // el attaches to existing element
events: {
'click button#add': 'addItem',
'click button#save': 'saveCollection'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<button id='save'>SAVE</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter // modify item defaults
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
},
saveCollection: function(){
var collectionLength = this.collection.length;
if(collectionLength > 0){
this.collection.validateModels();
//console.log(status);
}
else
alert('Collection is empty. Please add something.');
}
});
Now when a user starts the application, he/she will be presented with the screen:
When user clicks on Add, item would be added like:
I've put in hardcoded validation where 1st and 3rd added element would return error when user clicks on SAVE.
Where I'm stuck is how do I show those error only at that particular item view. For instance, if there's an error at 1st and 3rd item, then the model returns that error but I want to map that error to the 1st and 3rd list-item only, much like this:
Please help me suggest ways to approach it. Thanks in advance!
UPDATE:I've found a fix to that. So whenever there's a validation error, I do something like this:
world1Err: function(){
this.$el.find('span.error').text('Error Occured.')
},
Answer
Key things to note:
- Don't use
$(this.el)
, usethis.$el
instead - Use
listenTo
instead ofon
(bind) to avoid memory leaks (added advantage is that callbacks will be fired with the listener as context, in your case theview
) - Do not override the
remove
method ofBackbone.View
unless you know what you're doing and handle all the things it does by yourself
Smart moves:
- Default context of event handlers bound using backbone event hash is the view itself, along with the use of
listenTo
, no need to use_.bindAll
- Backbone collection has lots of underscore methods built in, you can do
this.collection.each
instead of_(this.collection.models).each
- You have underscore at your disposal, use it's
template
method rather than manually generating the template - You can quickly do
this.$(selector)
instead ofthis.$el.find(selector)
,$(selector, this.el)
etc - No need to manually create an instance of model like
new Item()
, set it's attributes and then add it to collection, just pass the attributes to collectionsadd
method, it'll create a model instance internally - You can use the collections length instead of manually keeping track of the count property
Suggestions:
- Do not use inline styles
- Have the item view render itself, and use
view.el
rather thanview.render().el
(I really don't know who invented this way or why)
You can generalize your code as shown below:
var Item = Backbone.Model.extend({
defaults: {
message: 'hello world',
count: 0
},
validate: function(attr, options) {
if (attr.count % 2 != 0) {
this.trigger('err', this.get('message') + attr.count + ' error');
}
}
});
var List = Backbone.Collection.extend({
model: Item,
validateModels: function() {
this.each(function(m) {
m.isValid(); // invoke models validate method
});
}
});
var ItemView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item').text()),
events: {
'click span.swap': 'swap',
'click span.delete': 'remove' // triggers view's built in remove method
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'err', this.errorHandler);
this.render();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
swap: function() {
var words = this.model.get('message').split(' ');
this.model.set({
message: words.reverse().join(' ')
});
},
errorHandler: function(msg) {
this.$('span.error').text(msg)
}
});
var ListView = Backbone.View.extend({
template: $('#itemView').text(),
events: {
'click button#add': 'addItem',
'click button#save': 'saveCollection'
},
initialize: function() {
this.collection = new List();
this.listenTo(this.collection, 'add', this.appendItem);
this.render();
},
render: function() {
this.$el.html(this.template);
this.collection.each(function(model) {
this.appendItem(model);
}, this);
},
addItem: function() {
this.collection.add({
count: this.collection.length
}, {
validate: true
});
},
appendItem: function(item) {
this.$('ul').append(new ItemView({
model: item
}).el);
},
saveCollection: function() {
if (this.collection.length > 0) {
this.collection.validateModels();
} else
alert('Collection is empty. Please add something.');
}
});
new ListView().$el.appendTo('body');
li span {
font-family: sans-serif;
}
span.control {
cursor: pointer;
}
span.swap {
color: blue;
}
span.delete {
color: orange;
}
span.error {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/template" id="item">
<span><%=message%> <%=count? count: ''%></span>
<span class="swap control">[swap]</span>
<span class="delete control">[delete]</span>
<span class="error"></span>
</script>
<script type="text/template" id="itemView">
<button id='add'>Add list item</button>
<button id='save'>SAVE</button>
<ul></ul>
</script>
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM