2

片側にアイテムのリスト、もう一方に選択したアイテムの詳細を表示するシンプルな画面を作成したい。ユーザーが項目の 1 つをクリックすると、その詳細が「詳細」セクションに表示されます。また、「リスト」セクションで選択したアイテムは、「アクティブ」クラスで装飾する必要があります。ここに私のルーターコードがあります:

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を空にして再入力することで、「アクティブな」アイテムクラスを設定することができました。（ノックアウトjsのように）「選択された」プロパティを観察する方法はありますか？変更すると、変更が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;
    }
});

よろしくお願いします

4

1 に答える 1

3

これが探しているものです (特に Events#listenTo メソッド)。
そう; あなたの見解では：

initialize: function() {
  // listen to your model
  this.listenTo(this.model, 'change:selected', this.updateClass);
},
updateClass: function() {
  // something like...
  this.$el.toggleClass('active');
}
于 2013-04-09T08:35:47.090 に答える