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

问题描述

|| 我正在尝试使用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）您如何布置所描述应用的代码？ 谢谢！     

解决方法

这是一个定义明确的问题！ 关于什么是模型存在疑问。我相信对于骨干世界中的模型构成有一个定义，我不确定您的策略是否符合该定义。另外，您还将状态存储在url和模型中。正如我将解释的那样，您可以仅将状态存储在url中。 如果我这样做，将有2个视图。一个用于您的应用程序控件，另一个嵌套在您的图形中：GraphView和AppView。模型将是您要绘制的数据，而不是接口的状态。 使用控制器启动应用程序视图，并处理url中定义的任何界面状态。 关于骨干网中的国家杠杆问题。传统的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传递或加书签的情况

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

我将以伪代码示例为例。为此，我将对数据进行一些假设： 数据是随时间变化的狗的数量（以年份为单位），其中滑块应具有上下限，并且体积数据太大而无法一次将其全部加载到客户端。 首先，让我们看一下表示统计数据的模型。对于图表上的每个点，我们都需要类似{人口：27000，年份：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()
        })            
    }

    ,  2）如何避免我的视图在模型上设置它们自己侦听的属性？ 你不知道您的模型应该对您尝试更新的任何属性进行验证，因此，如果属性设置失败或验证更改了值，则视图需要进行侦听。 您的视图所做的是，它试图在模型上设置一个值，然后模型要么对其进行设置，更改数据并对其进行设置，要么拒绝它。您的视图需要相应地更新。   3）如何根据模型的一部分推送新状态？

// for each attribute
_.each([\"attribute1\",\"attribute2\",\"attribute3\",...],_.bind(function(val) {
    // bind the change
    // bind the setState with `this` and the `value` as the first parameter
    this.bind(\"change:\" + value,_.bind(this.setState,this,value));
},this));