如何使用Backbone.js构建这个Web应用程序？

Question

我正在努力理解Backbone中的集合、模型等概念。

假如应用程序由侧边栏、时间滑块和柱状图组成：

为了提供一些背景，我之前使用了函数继承模式实现了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方法。但是随着模型的增长（以及状态变得越来越复杂，例如年份、当前选择、图表类型等），我也希望在URL中反映出来，并利用MVC和特别是Backbone.js。

1. 那么我应该如何在Backbone中构建这个结构？
   • 我应该重写我的columnChart类（和类似的类）吗？
   • 有没有一种简单的方法来检测状态中发生了什么变化，并仅使用这些参数设置新状态？

非常感谢您提供使用Backbone将Sidebar、Timeslider和Column chart绑定在一起的示例。

谢谢。

- dani

---

你的问题有点太大了，无法由某个人来回答。这样会带有偏见，并且实际上需要回答者几乎创建整个应用程序。如果你想得到答案，请将其分解成许多较小的问题。 - Julien

Answer 1

我会创建一个Backbone.Model的子类，名为DataSet，用于表示左侧复选框列表中的每个项目。其中应该有一个名为showInGraph的布尔标志。您需要创建一个Backbone.Collection子类来表示左侧部分中所有可能数据项的完整集合。使用DataSet的实例填充此集合以获取所有可能性。然后，每个项目都有两个不同的Backbone.View子类。其中之一是OptionView，它简单地呈现复选框及其是否已选中（根据showInGraph是否为true，呈现HTML输入元素的checked属性）。这还需要将事件处理程序绑定到复选框的onChange属性，以切换showInGraph。Backbone将自动传播该更改并为您重新渲染视图。在左侧div中使用此功能，并将其与所有可用数据集合相关联。

第二个视图子类是ChartView，如果它的showInGraph属性为true，则呈现图表中的项目，否则它将忽略它。

一步一步来。首先只需创建复选框的左侧列表。按照backbone文档很容易做到。然后，在右侧创建一个简单的

，每个数据集都有一个
• ，如果showInGraph为true，则显示，否则不显示。从那里到图表只是在ChartView视图中进行更高级的呈现。
  
  尝试一下，看看您能否取得进展。如果您遇到困难或需要澄清，请发表另一条评论。

- Peter Lyons