javascript - How can I save a collection, or atleast a portion of it, in backbone.js -
i need maintain order of models in collection in model , able save server. know can save individual models, when save "parent model" contains collection attribute holding collection saved.
is there way this? below code. , know isn't best, still learning.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="json2.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="backbone-min.js"></script> <script type="text/javascript"> $(function() { var wo = backbone.model.extend({ wonum: null, part: null, desc: null, initialize: function() { this.url = '/rest/wo/'+this.get('wonum'); } }); var woview = backbone.view.extend({ tagname: "tr", classname: "wo", initialize: function(options) { this.render = _.bind(this.render, this); }, render: function() { $(this.el).html("<td>"+this.model.get('wonum')+"</td><td>"+this.model.get('part')+"</td><td>"+this.model.get('desc')+"</td>"); return this; } }); var wos = backbone.collection.extend({ model: wo, url: '/rest/section/wos/' }); var section = backbone.model.extend({ defaults: { name : "section" }, wos: [], url: '/rest/section/', initialize: function() { this.wos = new wos(); this.wos.url += this.id; this.url += this.id; } }); var sectionview = backbone.view.extend({ tagname: "table", initialize: function() { _(this).bindall('add','remove'); var = this; this._woviews = []; this.model.wos.each(this.add); this.model.wos.bind('add', this.add); }, add: function(woobj) { var wov = new woview({ model: woobj, id: woobj.get('wonum')}); this._woviews.push(wov); if(this._rendered) $(this.el).append(wov.render().el); this.model.save(); }, render: function() { this._rendered = true; var = this; $(this.el).empty(); $(this.el).append("<thead><th>wo</th><th>part</th><th>desc</th></thead>"); $(this.el).append("<tbody>"); _(this._woviews).each(function(wov) { $(that.el).append(wov.render().el); }); $(this.el).append("</tbody>"); return this; } }); var sec = new section({id: 1}); sec.wos.add({ wonum: 1001, part: 'p1001', desc: 'd1001'}); sec.wos.add({ wonum: 1002, part: 'p1002', desc: 'd1002'}); var secv = new sectionview({model: sec, id: sec.get('id')}); $("body").append(secv.render().el); $("#addwo").bind("click",function() { secv.add(new wo({ wonum: 1005, part: 'p1005', desc: 'd1005'})); }); }); </script> </head> <body> <button id='addwo'>add wo</button> </body> </html>
i consider using collection's comparator function (which can set) preserve order of collection. comparator potentially use property of models; instance, model's name or position property.
using approach, save each model independently, have collection potentially refresh (where use comparator preserve desired order).
Comments
Post a Comment