Backbone.js - 协调布局（实例化）、状态和历史

Question

我正在寻找一种简单且可扩展的方法来序列化 Backbone.js 应用程序的完整状态。

假设我想存储完整状态（一些小部件模型 + 元信息，例如app 等）在我的“GlobalStateModel”中：

var GlobalStateModel = Backbone.Model.extend({
    defaults : {
        layout : undefined,
        widgetType1Collection : undefined, //Widget models
    },
}); 

我想这样做，因为这样我就可以轻松设置相应的历史记录条目：

var HistoryController = Backbone.View.extend({
    model : globalStateModel,

    initialize: function () {   
        _.bindAll(this, "render", "updateHistory");
        this.model.bind("change", this.updateHistory);  
    },

    updateHistory : function () {
        var globalStateModel = this.model.toJSON()
        var state = jQuery.param.querystring("", state )
        appRouter.navigate('v1' + state, false);
    }
});

但是这里出现了棘手的部分......我想要一个 LayoutController 或类似的实例来实例化与上面：

var LayoutController = Backbone.View.extend({   
    initialize: function () {   
        _.bindAll(this, "render");
        this.model.bind("change:layout", this.render);      
    },

    render : function () {
        var layout = this.model.get("layout");

        switch(layout){
            case "layout-1":
            this.renderLayout1();
            break;

            case "layout-2":
            this.renderLayout2();
            break;
        }
    },

    renderLayout1 : function () {       

        var widgetModel1 = new WidgetModel()
        var widgetController1 = new WidgetController({model : widgetModel1})

        this.model.widgetType1Collection.add(widgetModel1);

        //fetch the right widget model attributes from the global state?
        widgetAttrs = { ..... }
        widgetModel1.set(widgetAttrs)

     },

});

也许这种方法是完全有缺陷的，或者也许我只是缺少一些管道来使其正常工作？

如何让 LayoutController 实例化 1 个或多个小部件并让它们的模型成为 globalState 的一部分？

因此，1）当他们的模型/集合发生变化时，globalState会正确序列化，2）globalState更改/哈希更改会正确反映在小部件中吗？