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