StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ok, in order.. :)</p> <blockquote> <ol> <li><strong>Loading...</strong></li> </ol> </blockquote> <p>In case you want to validate data which stored on server, good practice do it on server-side. If validation on server will be unsuccessful, server should send not 200 HTTP code, therefore save metod of Backbone.Model will trigger error.</p> <p>Other side, for validation data backbone has unimplemented <a href="http://documentcloud.github.com/backbone/#Model-validate" rel="nofollow noreferrer">validate</a> method. I guess that right choise to implement and use it. But keep in mind that validate is called before set and save, and if validate returns an error, set and save will not continue, and the model attributes will not be modified. Failed validations trigger an "error" event.</p> <p>Another way, when we call silent set(with {silent: true} param), we should call isValid method manually to validate data.</p> <blockquote> <ol start="2"> <li><strong>Too many things render themselves too much..</strong></li> </ol> </blockquote> <p>You have to separate your Views under their logic. Good practice for collection is separate view for each model. In this case you could render each element independently. And even more - when you initalizing your container view for collection, you could bind any event from each model in the collection to appropriate view, and they will render automatically.</p> <blockquote> <p>Great, but the H2 at the start of the form is the same name as in the input - you need to update it. Oh, and you need to update the name on the list to the side.</p> </blockquote> <p>you could use JQuery <a href="http://api.jquery.com/on/" rel="nofollow noreferrer">on</a> method to implement callback which send value to display. Example:</p> <pre><code>//Container view init: function() { this.collection = new Backbone.Collection({ url: 'http://mybestpage.com/collection' }); this.collection.bind('change', this.render, this); this.collection.fetch(); }, render: function() { _.each(this.collection.models, function(model) { var newView = new myItemView({ model: model, name: 'view' + model.id }); this.$('#my-collection').append(newView.render().$el); view.on('viewEdit', this.displayValue); }, this); }, ... displayValue: function(value) { //method 1 this.displayView.setText(value); //we can create little inner view before, //for text displaying. Сonvenient at times. this.displayView.render(); //method 2 $(this.el).find('#display').html(value); } //View from collection myItemView = Backbone.View.extend({ events: { 'click #edit': 'edit' }, init: function(options) { this.name = options.name; }, ... edit: function() { this.trigger('viewEdit', this.name, this); } </code></pre> <blockquote> <p>OH, and the list sorts itself by names!</p> </blockquote> <p>You can use <a href="http://documentcloud.github.com/backbone/#Collection-sort" rel="nofollow noreferrer">sort</a> method for backbone collections. But (!) Calling sort triggers the collection's "reset" event. Pass {silent: true} to avoid this. <a href="https://stackoverflow.com/questions/7005411/sorting-a-backbone-collection-after-initialization">How to</a></p> <blockquote> <p>Here's another example: You want to create a new item in the collection...</p> </blockquote> <p>When we press a "New" button we need to create a new model, but only when .save() method will trigger success, we should push this model to collection. In another case we should display error message. Of course we have no reasons to add a new model to our collection until it has been validated and saved on server.</p> <blockquote> <ol start="3"> <li><strong>It's subviews all the way down... subviews become zombie-like or do not respond.</strong></li> </ol> </blockquote> <p>when you (or any model) calling render method, all elements inside it will be recreated. So in case when you have subviews, you should call <code>subView.delegateEvents(subView.events);</code> for all of subviews; Probably this method is little trick, but it works.</p> <blockquote> <ol start="4"> <li><strong>Flickering..</strong></li> </ol> </blockquote> <p>Using thumbnails for big and medium images will minimize flickering in lot of cases. Other way, you could separate rendering of view to images and other content.</p> <p>Example: </p> <pre><code>var smartView = Backbone.View.extend({ initialize: function(){ this.model.on( "imageUpdate", this.imageUpdate, this ); this.model.on( "contentUpdate", this.contentUpdate, this ); }, render: function(){ this.$el.html(this.template(this.model.toJSON())); }, imageUpdate: function(){ this.$el.find('#image').attr('src', this.model.get('imageUrl')); }, contentUpdate: function(){ this.$el.find('#content').html(this.model.get('content')); } }) </code></pre> <p>I hope this helps anyone. Sorry for grammar mistakes, if any :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload