我正在努力了解 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。
- 那么我该如何在 Backbone 中构造它呢?
- 我应该重写我的 columnChart 类(和类似的类)吗?
- 是否有一种简单的方法来检测状态发生的变化并仅使用这些参数设置新状态?
非常感谢使用 Backbone 将边栏、时间 slider 和柱形图捆绑在一起的示例。
谢谢。
最佳答案
我会创建一个名为 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
中进行更精美的渲染的问题。查看。
尝试一下,看看是否能取得一些进展。如果您遇到困难或需要澄清,请发表另一条评论。
关于javascript - 如何使用 Backbone.js 构建此 Web 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5989888/