如何解决Backbone.js状态管理/基于url片段的视图初始化
|| 我正在尝试使用Backbone.js跟踪此应用程序中的状态： 我有一个带有默认设置的\“ ChartAppModel \”：ChartAppModel = Backbone.Model.extend({
defaults: {
countries : [],selectedCountries : [],year : 1970,},initialize: function() {
loadAbunchOfData();
checkStartState();
}
});
var startState = $.deparam.fragment(); //using Ben Alman\'s BBQ plugin
this.set({selectedCountries: startState.s,year: startState.y});
ChartAppViewSidebar = Backbone.View.extend({
initialize: function(){
this.model.bind(\"change:selectedCountries\",this.render);
},render : function(){
[... render new sidebar with check boxes ...]
},events: {
\"change input[name=country]\": \"menuChangeHandler\",menuChangeHandler : function(){
[... set selectedCountries on model ...]
},ChartAppModel = Backbone.Model.extend({
initialize: function() {
this.bind(\"change\",this.setState);
}
});
解决方法
这是一个定义明确的问题！
关于什么是模型存在疑问。我相信对于骨干世界中的模型构成有一个定义，我不确定您的策略是否符合该定义。另外，您还将状态存储在url和模型中。正如我将解释的那样，您可以仅将状态存储在url中。
如果我这样做，将有2个视图。一个用于您的应用程序控件，另一个嵌套在您的图形中：GraphView和AppView。模型将是您要绘制的数据，而不是接口的状态。
使用控制器启动应用程序视图，并处理url中定义的任何界面状态。
关于骨干网中的国家杠杆问题。传统的Web应用程序使用链接/ URL作为状态的主要杠杆，但是现在所有这些都在改变。这是一种可能的策略：
Checkbox Change Event -> Update location fragment -> trigger route in controller -> update the view
Slider Change Event -> Update location fragment -> trigger route in controller -> update the view
Url specified in address bar -> trigger route in controller -> update the view
DogStatModel extends Backbone.Model ->
DogStatCollection extends Backbone.Collection ->
model: DogStatModel
query: null // query sent to server to limit results
url: function() {
return \"/dogStats?\"+this.query
}
AppController extends Backbone.Controller ->
dogStatCollection: null,appView: null,routes: {
\"/:query\" : \"showChart\"
},chart: function(query){
// 2dani,you described a nice way in your question
// but will be more complicated if selections are not mutually exclusive
// countries you could have as countries=sweden;france&fullscreen=true
queryMap = parse(query) //
if (!this.dogStatCollection) dogStatCollection = new DogStatCollection
dogStatCollection.query = queryMap.serverQuery
if (!this.appView) {
appView = new AppView()
appView.collection = dogStatCollection
}
appView.fullScreen = queryMap.fullScreen
dogStatCollection.fetch(success:function(){
appView.render()
})
}
// for each attribute
_.each([\"attribute1\",\"attribute2\",\"attribute3\",...],_.bind(function(val) {
// bind the change
// bind the setState with `this` and the `value` as the first parameter
this.bind(\"change:\" + value,_.bind(this.setState,this,value));
},this));
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。