backbone.js - How to make selected item to change class(How to make property observable in backbone) -
i want build simple screen, list of items in 1 side , selected item details -on another. when user click on 1 of items - details displayed in 'details' section. selected item in 'list' section must decorated 'active' class. here router code:
var approuter = backbone.router.extend({ routes:{ "":"list", "users/:id":"userdetails" }, list:function () { this.userslist = new userscollection(userslist);/* new userscollection()*/ var self = this; //this.userlist.fetch({ // success: function () { this.userslistview = new userslistview({ model: this.userslist }); $('#sidebar').html(this.userslistview.render().el); // } //})//end of fetch }, userdetails:function (id) { if(this.userslist){ //unselect prevously selected if(this.user )this.user.set({'selected':false}); this.user = this.userslist.get(id); //select current this.user.set({'selected':true}); //empty refill items section this.userslistview = new userslistview({ model: this.userslist }); $('#sidebar').empty().html(this.userslistview.render().el); if (this.userdetailsview) this.userdetailsview.close(); this.userdetailsview = new userdetailsview({model:this.user}); $('#content').html(this.userdetailsview.render().el); } else{ } } });
so far managed set 'active' item class emptying , refill items section html. there way observe (like in knockoutjs) 'selected' property, once changes -the change visible in html?
code of view:
window.userlistitemview = backbone.view.extend({ tagname:"li", template:_.template($('#tpl-user-list-item').html()), render:function (eventname) { if(this.model.get('selected')){$(this.el).addclass('active');} $(this.el).html(this.template(this.model.tojson())); return this; } });
thanks forwards
this you're looking (especially events#listento method).
so; in view:
initialize: function() { // listen model this.listento(this.model, 'change:selected', this.updateclass); }, updateclass: function() { // like... this.$el.toggleclass('active'); }
Comments
Post a Comment