javascript - 如何使用 Backbone.js 构建此 Web 应用程序？

Question

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

假设该应用由侧边栏、时间 slider 和柱形图组成:

为了提供一些背景知识，我之前使用函数继承模式实现了 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;
 }

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

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

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

谢谢。

Answer 1

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

第二个 View 子类是ChartView如果它是 showInGraph，它会在图表中呈现该项目将其归为真，否则它只会忽略它。

循序渐进。首先只需制作左侧的复选框列表。按照 Backbone 文档，这应该很简单。然后试着做一个简单的 <ul>在右侧带有 <li>对于每个具有 showInGraph 的数据集是的，但如果 showInGraph 则没有是假的。从那里转到图表只是在 ChartView 中进行更精美的渲染的问题。查看。

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