Backbone.js基于url片段的状态管理/视图初始化

Question

我正在尝试使用Backbone.js跟踪此应用中的状态:

我有一个带有一组默认值的"ChartAppModel":

ChartAppModel = Backbone.Model.extend({

defaults: { 
    countries : [], 
    selectedCountries : [],
    year : 1970,
},

initialize: function() { 
    loadAbunchOfData();
    checkStartState();
}

});

如果给定一个开始片段,则应该覆盖此默认状态:

var startState = $.deparam.fragment(); //using Ben Alman's BBQ plugin
this.set({selectedCountries: startState.s, year: startState.y});

现在,例如SidebarView已准备好更新:

ChartAppViewSidebar = Backbone.View.extend({

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

render : function(){
      [... render new sidebar with check boxes ...]
},

问题是我在侧边栏上还有一个更新模型的事件处理程序:

events: {
"change input[name=country]": "menuChangeHandler",
},

menuChangeHandler : function(){
      [... set selectedCountries on model ...]
},

所以会有一个反馈循环...然后,我也想要一种推动新状态的方式 - 所以我听模型的变化:

ChartAppModel = Backbone.Model.extend({

initialize: function() { 
    this.bind("change", this.setState);
}

});

......而且这个州长经常会崩溃......

问题:

1)如何基于片段初始化我的视图(例如"应该检查哪个复选框")？(对于不是典型"路线"的状态/开始状态的最佳实践的任何提示都表示赞赏)

2)如何避免我的观点在他们自己听的模型上设置属性？

3)如何根据模型的一部分推送新状态？

奖金:)

4)您将如何为所描述的应用程序布置代码？

谢谢!

Answer 1

这是一个定义明确的问题!

关于什么是模型存在疑问.我相信有一个关于什么构成骨干世界中的模型的定义,我不确定你的策略是否符合该定义.您还要将状态存储在URL和模型中.您可以将状态存储在URL中,我将解释.

如果我这样做,将有2个视图.一个用于您的应用程序控件,并嵌套在您的图形中:GraphView和AppView.模型将是您要绘制的数据,而不是界面的状态.

使用控制器启动应用程序视图,并处理URL中定义的任何接口状态.

关于Backbone中的状态杠杆存在一个问题.传统的Web应用程序使用链接/ URL作为状态的主要杠杆,但现在所有这些都在改变.这是一种可能的策略:

Checkbox Change Event -> Update location fragment -> trigger route in controller -> update the view
Slider Change Event -> Update location fragment -> trigger route in controller -> update the view

这种策略的好处在于它会处理网址传递或加入书签的情况

Url specified in address bar -> trigger route in controller -> update the view

我将尝试一个伪代码示例.为此,我将对数据做一些假设:数据是随着时间推移的狗群(具有年份的粒度),其中滑块应该具有下限和上限,并且体积数据太大而无法加载所有数据立刻给客户.

首先让我们看看模型来表示统计数据.对于图表上的每个点,我们需要像{population:27000,year:2003}这样的东西

DogStatModel extends Backbone.Model ->

并将收集这些数据

DogStatCollection extends Backbone.Collection ->
    model: DogStatModel
    query: null // query sent to server to limit results
    url: function() {
        return "/dogStats?"+this.query
    }

现在让我们看一下控制器.在我提出的这个策略中,控制器不负其名.

AppController extends Backbone.Controller ->
    dogStatCollection: null,
    appView: null,

    routes: {
         "/:query" : "showChart"
    },

    chart: function(query){
        // 2dani, you described a nice way in your question
        // but will be more complicated if selections are not mutually exclusive
        // countries you could have as countries=sweden;france&fullscreen=true
        queryMap = parse(query) //  
        if (!this.dogStatCollection) dogStatCollection = new DogStatCollection
        dogStatCollection.query = queryMap.serverQuery
        if (!this.appView) {
           appView = new AppView()
           appView.collection = dogStatCollection
        }
        appView.fullScreen = queryMap.fullScreen
        dogStatCollection.fetch(success:function(){
          appView.render()
        })            
    }