如何使用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方法,例如从侧边栏添加新实体.但是随着模型的增长(状态变得越来越复杂,像year,currentSelection,chartType等变量) - 我也想在URL中反映出来 - 我想利用MVC,特别是Backbone.js.

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

将Sidebar,Timeslider和Column图表绑在一起的一个例子 - 使用Backbone - 将非常感激.

谢谢.

Answer 1

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

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

一步一步来.首先只需制作复选框的左侧列表.根据骨干文档,这应该是直截了当的.然后尝试<ul>在右边做一个简单的<li>,每个数据集都有一个showInGraphtrue,但是如果showInGraph是false则没有.从那里到图表只是ChartView视图中更精彩的渲染问题.

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