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 中，我将对此进行解释。

如果我这样做，就会有两种观点。一个用于您的应用程序控件，并嵌套在该控件内用于您的图形：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 传递或添加书签的情况，

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()
        })            
    }

Answer 2

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));