backbone.js - my Backbone Collection does not display the change in model -
i have collection of items(books). each item displays button updates attribute (due date) of corresponding item.
item-list:
- [button] item 1 [monday]
- [button] item 2 [monday]
- [button] item 3 [tuesday]
for example, if click button on item 2, maybe server answers 'tuesday' , models attribute 'tuesday'.
the problem see change if press refresh button on browser.
var itemview = new bookcollectionview({collection: items}); itemview.listento(items,'change',itemview.render); self.$el.append(itemview.render().el);
that how initialize list in main window. set of collection looks this:
var bookcollection = backbone.collection.extend({ defaults: { user:null, token:null }, initialize: function(options){ this.user = options.user; this.token = options.token; }, comparator: 'item', model: bookmodel, parse: function(data) { return data.xx; }, }); var bookcollectionview = backbone.view.extend({ events: { "click .btn-extend" : "renewbook" }, initialize: function(){ try{ _.bindall(this, 'fetchsuccess', 'fetcherror', 'render', 'renewbook'); this.template = rendertmpl('booklist'); this.collection.fetch({ success: this.fetchsuccess, error: this.fetcherror }); }catch(err){console.log("error:bookcollectionview");} }, fetchsuccess: function() { this.render(); }, fetcherror: function() { throw new error('error loading book collection'); }, render: function(){ this.$el.html(this.template({collection: this.collection.tojson()})); this.$el.trigger("create"); return this; }, // renew book when button clicked, calling model's "renew()" function renewbook: function(e){ console.log("you clicked button!"); e.preventdefault(); //each button got unique id fetch here , use find model. inside collection-template, per convention, //the id="<%= book.buttonid %>" string, have used integer model's buttonid attribute. parse integer. var id = $(e.currenttarget).attr("id"); this.collection.findwhere({"buttonid": parseint(id)}).renew3(); } });
edit: here book model
var bookmodel = backbone.model.extend({ defaults: { status: null, item: null, edition: null, about: null, label: null, queue: null, renewals: null, reminder: null, starttime: null, endtime: null, cancancel: null, canrenew: null, htmltag: "?", colorrgb: [1,66,96], daysleft: null, buttonid: null, buttondisabled: null, }, url: function(){ return server+app.session.get('x.session.patron')+"/renew?access_token="+app.session.get('x.session.token'); }, initialize: function(){ this.setup(); }, setup : function(){ //give each book unique button renewal if(this.get("about")!=null) {this.set("buttonid",giveid());} if(this.get("canrenew") && this.get("queue")==0){ this.set("buttondisabled", [1,66,96,207,218,227]); } else { this.set("buttondisabled", [188,199,205,222,227,231]); } this.daysleft(this.get("endtime")); if(this.get("daysleft")<=0){ this.set("htmltag","late"); var badvalues=[255,0,0]; this.set("colorrgb",badvalues); alert("a1"); } else{ if(this.get("daysleft")<=3 && this.get("daysleft")>=0){ this.set("htmltag","due soon!"); var sosovalues = [250,190,0]; this.set("colorrgb",sosovalues); alert("a1"); } else{// wenn buch ok, set color green this.set("htmltag","o.k."); var goodvalues = [80,190,0]; this.set("colorrgb",goodvalues); } } }, renew3: function(){ if(this.get("canrenew") && this.get("queue")==0){ this.fetch({ data: json.stringify({ "doc":[ {"edition":this.get("edition")}, {"item":this.get("item")} ] }), datatype: 'json', type:'post', contenttype:'application/json' }).then(function () { this.setup(); alert("a1"); }); } else{ alert("a1"); } }, // calculate # of days until book has returned library daysleft : function(date){ try{ var = moment(date); var b = moment(); this.set("daysleft",a.diff(b, 'days')); } catch(err){console.log("error occured during daysleft calculations");} }, });
Comments
Post a Comment