Backbone.js的状态管理/视图初始化基于URL片段 [英] Backbone.js state management / view initialization based on url fragment

问题描述

我试图用Backbone.js的跟踪国家在这个应用程序：

I'm trying to keep track of the state in this app using Backbone.js:

我有一个ChartAppModel用默认设置的：

I have a "ChartAppModel" with a set of defaults:

ChartAppModel = Backbone.Model.extend({

defaults: { 
    countries : [], 
    selectedCountries : [],
    year : 1970,
},

initialize: function() { 
    loadAbunchOfData();
    checkStartState();
}

});

如果给出一个开始片段，这个默认状态然而应覆盖：

If given a start fragment, this default state should however be overwritten:

var startState = $.deparam.fragment(); //using Ben Alman's BBQ plugin
this.set({selectedCountries: startState.s, year: startState.y});

现在，例如SidebarView准备被更新：

Now, for example the SidebarView is ready to be updated:

ChartAppViewSidebar = Backbone.View.extend({

initialize: function(){
      this.model.bind("change:selectedCountries", this.render);
},

render : function(){
      [... render new sidebar with check boxes ...]
},

问题是，我也有上更新模型侧栏的一个事件处理程序：

Problem is I also have an event handler on the sidebar that updates the model:

events: {
"change input[name=country]": "menuChangeHandler",
},

menuChangeHandler : function(){
      [... set selectedCountries on model ...]
},

所以会有一个反馈回路...
然后，我也想推一个新的国家的一种方式 - 所以我听模型更改：

So there will be a feedback loop ... And then, I'd also like a way of pushing a new state - so I listen to model changes:

ChartAppModel = Backbone.Model.extend({

initialize: function() { 
    this.bind("change", this.setState);
}

});

...而相对很快这种状态下，管理者会崩溃......

... and relatively soon this state-manager will collapse ...

问题：

1）如何初始化我根据片段（例如，这复选框应检查）的意见？ （关于国家的最佳做法任何提示/启动状态，这不是一个典型的路线是AP preciated）

1) How do I init my views (for example "which checkboxes should be checked") based on the fragment? (any hints on best practices for state / start state that is not a typical "route" are appreciated)

2）如何避免我的看法设置上，他们听自己为模型的属性？

2) How can I avoid my views setting an attribute on the model which they themselves listen for?

3）如何可以把一个新的状态基于该模型的一部分​​吗？

3) How can I push a new state based on a part of the model?

奖励：）

的 4）你会如何铺陈code为应用程序描述？的

谢谢！

推荐答案

这是一个明确定义的问题！

That is one well defined question!

有超过什么是模式的问题。我相信这是一个定义漂浮什么构成的骨干世界的模式，我不知道你的战略是符合该定义是一致的。你也是存储在这两个网址，模型的状态。你可以只存储在url中的状态，我会解释。

There is a question over what is a model. I believe there is a definition floating around as to what constitutes a model in the backbone world, and I'm not sure your strategy is in keeping with that definition. Also you are storing the state in both the url, and the model. You can just store the state in the url, as I will explain.

如果我这样做，将有2次。一为您的应用程序的控制，并嵌套一个为你的图里面：GraphView和APPVIEW。该模型将是你去积，接口不是国家的数据。

If I was doing this, there would be 2 views. One for your app controls, and nested inside that one for your graph: GraphView, and AppView. The model will be the data your going to plot, not the state of the interface.

使用一个控制器来启动应用程序视图，并处理在URL中定义的任何接口的状态。

Use a controller to kick start the app view and also to process any interface state defined in the url.

有一个关于骨干状态的杠杆问题。传统Web应用程序使用的链接/ URL作为国家的主要杠杆，但一切正在改变。这里是一个可能的策略：

There is a question about levers of state in Backbone. Traditional web applications used a link/url as the primary lever of state but all that is now changing. Here is one possible strategy:

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

有关这种策略的伟大的事情是，它需要在那里的网址是围绕通过或书签的情况下照顾

The great thing about such a strategy is that it takes care of the case where urls are passed around or bookmarked

Url specified in address bar -> trigger route in controller -> update the view

我要在伪code例如刺伤。对于这一点，我会在数据的一些假设：
该数据是随时间变化的犬群（与一年中的颗粒度），其中，所述滑动件应该有一个下限和上限，并​​且有体积数据太大将其全部一次加载到客户端。

I'll take a stab at a pseudo code example. For this, I will make some assumptions on the data: The data is the dog population over time (with a granularity of year), where the slider should have a lower and upper bound, and there volume data is too large to load it all to the client at once.

首先，让我们来看看模型重新present的统计数据。对于图表上的每一点，我们需要这样的东西{人口：27000，年份：2003}
让我们再present这是

First let's look at the Model to represent the statistical data. For each point on the graph we need something like { population: 27000, year: 2003 } Lets represent this as

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
    }

现在让我们看看控制器。在这种策略中，我建议，控制器辜负它的名字。

Now lets look at the controller. In this strategy I propose, the controller lives up to its name.

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()
        })            
    }

这篇关于Backbone.js的状态管理/视图初始化基于URL片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！