backbone.js - 如何使所选项目更改类(如何使属性在主干中可观察)

Question

我想构建简单的屏幕，其中一侧是项目列表，另一侧是所选项目的详细信息。当用户单击其中一项时 - 其详细信息显示在“详细信息”部分。 此外，“列表”部分中的选定项目必须用“事件”类修饰。 这是我的路由器代码:

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 the 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{

    }
}
});

到目前为止，我设法通过清空并重新填充项目部分 html 来设置“事件”项目类。 有没有什么方法可以观察(就像在knockoutjs中)“selected”属性，因此一旦它发生变化 - 更改将在html中可见？

查看代码:

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;
    }
});

感谢转发

Answer 1

This就是您正在寻找的(尤其是 Events#listenTo 方法)。
所以;在您看来:

initialize: function() {
  // listen to your model
  this.listenTo(this.model, 'change:selected', this.updateClass);
},
updateClass: function() {
  // something like...
  this.$el.toggleClass('active');
}