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

我很难在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类(和类似的类)吗？
>有没有一种简单的方法可以检测状态中的变化,只使用这些参数设置新状态？

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

谢谢.

解决方法

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

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

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

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

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

解决方法

相关文章