Backbone.js的状态管理/视图初始化

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

0123现在

，例如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); 
} 

}); 

...和relativel Ÿ一旦这种状态管理器将崩溃......

问题：

1）如何根据片段我初始化我的（例如，“该复选框应检查”）的意见？ （为国家的最佳做法任何提示/启动状态，这不是一个典型的“路线”的赞赏）

2）如何避免我的意见设置上，他们自己听的模型属性？

3）如何能够推动基于模型的一部分，一个新的状态？

奖金:)

4）你会如何放置该应用程序的代码来描述？

谢谢！

Answer 1

即一个明确定义的问题！

有什么是模型的问题。我相信有一个定义在什么构成了骨干网模型，我不确定你的策略是否与这个定义保持一致。此外，您还将状态存储在网址和模型中。正如我将解释的，你可以将状态存储在URL中。

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

使用控制器来启动应用程序视图，并处理url中定义的任何接口状态。

在Backbone中存在一个关于状态杠杆的问题。传统的Web应用程序使用链接/网址作为状态的主要杠杆，但现在正在改变。这里是一个可能的策略：

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 

我会在采取刺的护理伪代码示例。为此，我将对数据进行一些假设： 数据是一段时间内狗的数量（粒度为年），滑块应该有一个下限和上限，并且卷数据太大而无法加载它一次全部交给客户。

首先让我们看看Model来表示统计数据。对于图表上的每一点上，我们需要这样的东西{人口：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() 
     })    
    } 

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