我正在试图弄清楚Backbone.js是否是我当前项目的正确框架:可视化应用程序。
我有很多问题:
1)状态/路由?
由于这不是典型的RESTful应用程序,而是具有各种图表类型和这些图表设置的可视化应用程序,如何在URL中维护状态? 假设我的areaChart模型有许多默认值,如下所示:
AreaChartModel = Backbone.Model.extend({
defaults: {
selectedCountries: [],
year: 1970,
stacked: false
},
initialize: function(){
[...]
}
});
在对模型进行更新时,我想序列化其中一些属性,以便为特定状态添加书签:chartApp.html#!year = 1970& stacked = false等。
反之亦然,在使用此状态启动应用程序时,如何“取消”url状态并设置模型?我可以使用Backbone的内在路由吗?
2)控制器和耦合?
看起来Backbone有一个非常紧凑的视图模型耦合? 这真的是我应该将我的areaChartView绑定到模型吗?
AreaChartView = Backbone.View.extend({
initialize: function(){
areaChartModel.bind("change:year", this.render);
}
});
这通常不是控制器的角色吗?
3)延续:模型与控制器?
鉴于此情况:
“补充工具栏”中的更改应触发一系列功能:
1)“应加载当前选择的新数据”
2)“根据这些数据,可以更新可视化视图中的比例”
3)“应该呈现可视化视图”
我应该在哪里放置这些函数,如何在状态稳定时触发的模型中创建事件? (即,当调用了所有函数并且是时候设置视图状态了吗?)
答案 0 :(得分:3)
1)我会尽可能使用“:params”和“* splats”, read more来使用Backbone.js原生路由。您可以将所有查询都放入Backbone.js路由中,但我个人会牺牲某些东西来支持直观的UI按钮
e.g。我将默认设置为线条,您无法使用URL预设,但更改为堆叠图表只需单击一个按钮即可。
我可能会偏离使用?和&在我的网址中。我可能稍后回到这一点,因为它很有意思。
2)你的例子很好,你只需要记住Backbone.js MVC术语与传统的MVC无关。
Backbone Views本质上是传统MVC中的Controller。 骨干控制器只是在框架内部路由的一种方式。 与Backbone.js一起使用的模板引擎是传统的MVC视图。
3)仍在写
答案 1 :(得分:0)
关于问题#3,我会为滑块创建Model
和View
。
然后我会将模型上change
事件的触发与更新图形视图的视图中的某个函数相关联(如更改比例)。类似的东西:
var Slider = Backbone.Model.extend({})
var SliderView = Backbone.View.extend({
initialize: function() {
this.model.bind('change', this.render);
}
render: function() {
// load data, change scales, etc.
}
});
var slider = new Slider();
var slider_view = new SliderView({ model: slider });
也许一个好主意是将绑定放在父视图中,然后调度到子视图,协调他们的工作。
答案 2 :(得分:0)
请坐下一会儿,考虑维持整个州是否一个好主意?拥有基于URL的状态管理的关键动机是能够支持基于浏览器的导航按钮并能够为页面添加书签。在可视化应用程序中,您的数据可能每时每刻都在变化。这不是您想要在app-url中保留的内容。当用户为您的应用添加书签并在三天后回复它时,您真的想要这样吗 - 他看到三天数据的可视化?对于您的场景,假设我没有误解您的要求,我建议您将数据状态保留在模型中。
关于视图与模型数据的同步,是的,您可以自己编写所有绑定逻辑。在这种情况下,您的View类将负责在第一个渲染上设置绑定。在随后的渲染调用(可以响应模型中的任何更改事件时调用)中,将刷新存在可视化的DOM /画布。
可能你应该期待一个数据同步插件,它可以为你提供很多样板。 This page列出了一些可用的数据绑定扩展。 Orchestrator是我一直在努力的另一个解决方案,在这方面可能会有所帮助。