Question

我是骨干和js的新手。我有一个关于代码结构的一般问题。我目前正在构建一个包含布局视图和两个区域的网页。左侧区域已填充并显示在页面加载上。右侧区域仅在左侧区域中单击时显示和填充。我的控制器如下所示：

mainView.leftRegion.show(treeview); 
...
treeItemView.on("childview:item:click", function(childview, item){
    // Fetch collection of subitems from datasource
    var fetchingSubitems = App.request("subitems:entity", item.get("id"));

    ...

    // when done update item model with fetched collection
    item.set({subitems : subitems});

    var subitemsView = new app.subitemsList({
            model : item
    });

    mainView.rightRegion.show(subitemsView);
}

我的问题是我想在点击事件之外显示正确的视图，然后在更新项目模型时更新它。但是我该如何构建呢？

Answer 1

你可以创建一个包含subItems的通用状态Backbone模型：

var State =  Backbone.Model.extend({

        defaults : {
        subItems: []
    }

}）;

在初始化时将此模型发送到左侧和右侧视图：

state = new State();
   var treeView = new TreeView({state:state});
   var subitemsView = new app.subitemsList({state:state});
   mainView.leftRegion.show(treeview);
   mainView.rightRegion.show(subitemsView);

单击项目时修改状态模型：

treeItemView.on("childview:item:click", function(childview, item){
// Fetch collection of subitems from datasource
    var fetchingSubitems = App.request("subitems:entity", item.get("id"));

    ...

    // when done update state model
    state.set("subItems",fetchingSubItems);



}

右视图必须监听状态模型上子项的更改：

this.listenTo(state, "change:subitems", this.changeCollectionAndRender);

方法“changeCollectionAndRender”必须从状态模型中获取子项列表，更新其集合并重新呈现：

changeCollectionAndRender:function(){

this.collection = this.state.get("subItems");
this.render();
}

骨干总控制器结构

1 个答案: