我很难在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视图中更精彩的渲染问题.
试试看,看看你是否可以取得一些进展.如果您遇到困难或需要澄清,请发表另一条评论.
