如何用Backbone.js構建這個Web應用程序？

我正在努力讓我的頭在收集，模型等在骨幹。如何用Backbone.js構建這個Web應用程序？

假設應用程序包含一個邊欄，一時間滑條和柱形圖：

Web app mockup

提供一些背景，我一直在使用功能的遺傳模式先前導入的ColumnChart類：

namespace.columnChart = function() { 

    var chart = {}; 

    var width = 500; 
    var height = 500; 
    var data = []; 

    chart.setState = function(state){ 
     data = state.data; 
     updateVis(); 
    } 

    function updateVis(){ 
     ... render chart based on state ... 
    } 

    return chart; 
}

通過簡單的綁定，我可以調用columnChart上的setState方法，例如在側邊欄添加一個新的實體。但隨着模型的增長（以及狀態變得越來越複雜，像年，currentSelection，chartType等變量） - 我也想反映在URL中 - 我想利用MVC，特別是Backbone.js。

那麼，如何在主鏈結構呢？
- 我應該重寫我的ColumnChart類（和相似的類）？
- 是否有一種簡單的方法來檢測狀態發生了什麼變化，並且只使用這些參數設置新狀態？

捆紮側欄，時間滑和柱形圖在一起的一個實例 - 使用骨幹 - 將不勝感激。

謝謝。

來源

2011-05-13 dani

你的問題對於有人回答這個問題太大了。這將是有偏見的，實際上需要回答者幾乎創建應用程序。如果你想要別人回答，就把它分解成許多小問題。 – Julien 2011-05-17 20:15:39

我會做Backbone.Model的子類，稱爲DataSet表示在複選框的左側列表中的每個項目。這應該有一個布爾標誌showInGraph。您可以創建一個Backbone.Collection子類來表示左側部分中可能的數據項的完整集合。使用DataSet的實例爲所有可能性填充此集合。然後每個項目獲得2個不同的Backbone.View子類。一個是OptionView，它只顯示覆選框以及是否被選中（根據showInGraph是否爲true來呈現HTML輸入元素的檢查屬性）。這還需要綁定到複選框的onChange屬性的事件處理程序才能切換showInGraph。主幹會自動傳播該更改併爲您重新呈現視圖。在左邊的div中使用它，並將其與所有可用數據集的集合關聯。

第二個視圖的子類是ChartView，如果它的showInGraph屬性爲true，則呈現圖表中的項目，否則它會忽略它。

把它一步一步來。首先製作複選框的左側列表。按照骨幹文檔，這應該很簡單。然後儘量讓只是一個簡單的<ul>右側與<li>對於具有showInGraph真實的，但咱這showInGraph是假的每個數據集。從那裏進入圖表只是ChartView視圖中更有趣的渲染問題。

嘗試了這一點，看看你是否能取得一些進展。如果您遇到困難或需要澄清，請發表另一條評論。

來源

2011-05-17 23:12:18

如何用Backbone.js構建這個Web應用程序？

回答

相關問題