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

【问题标题】：How to build this web app with Backbone.js?如何使用 Backbone.js 构建这个 Web 应用程序？
【发布时间】：2011-08-24 19:07:17
【问题描述】：

我正在努力了解 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 方法，例如从侧边栏添加新实体。但随着模型的增长（状态变得更加复杂，变量如 year、currentSelection、chartType 等）——我也希望在 URL 中反映出来——我想使用 MVC，特别是 Backbone.js。

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

非常感谢使用 Backbone 将侧边栏、时间滑块和柱形图捆绑在一起的示例。

谢谢。

【问题讨论】：

你的问题太大了，没人能回答。这将是有偏见的，实际上需要回答者几乎创建应用程序。如果您希望有人回答，请将其分解为许多较小的问题。

标签： javascript model-view-controller web-applications javascript-framework backbone.js

【解决方案1】：

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

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

一步一步来。首先，只需制作左侧的复选框列表。遵循骨干文档应该很简单。然后尝试在右侧创建一个简单的<ul>，并为每个具有showInGraph 为真但如果showInGraph 为假的数据集设置一个<li>。从那里到图表只是在ChartView 视图中进行更高级的渲染。

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

【讨论】：