如何使用 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;
 }

通过简单的绑定，我可以在 for 时调用 columnChart 上的 setState 方法从侧边栏添加新实体的示例。但随着模型的增长（并且状态变得更加复杂，变量如年份、currentSelection、chartType 等）——我也希望在 URL 中反映出来——我想利用 MVC，特别是 Backbone.js。

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

如果有一个使用 Backbone 将侧边栏、时间滑块和柱形图结合在一起的示例，我们将不胜感激。

谢谢。

Answer 1

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

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

一步一步来吧。首先只需制作左侧的复选框列表。按照主干文档，这应该很简单。然后尝试在右侧创建一个简单的

，并为每个 showInGraph true 的数据集添加一个
• ，但如果 showInGraph 为 false，则什么也不做。从那里到图表只需在 ChartView 视图中进行更精美的渲染即可。

尝试一下，看看是否能取得一些进展。如果您遇到困难或需要澄清，请发表另一条评论。