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

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -