Ember.router的并发状态

时间:2014-04-23 05:00:50

标签: ember.js statechart

我想使用Ember.Router在Ember.js v1.5.x中实现这个statechart,但是我遇到了并发和历史机制的问题。

基本上当我激活摘要路由/状态时,我想在同一时间过渡到没有做出任何更改 Transient 状态。我怎样才能做到这一点?

P.S。我知道,例如stativus具有这些功能,但不知道如何在Ember.js路由中使用它。一个例子就是好的。

(图片来源:Ian Horrocks:使用Statecharts构建用户界面第153页)。

1 个答案:

答案 0 :(得分:1)

:)

是的,状态图很可爱,但Ember实际上通过计算属性提供了子状态。

我对状态图表并不过分熟悉,在我完全熟悉该特定示例的命名之前,我真的需要消耗你在这里提到的资源(嗡嗡声)(https://github.com/emberjs/ember.js/issues/4767#issuecomment-41458710)。 (如果你愿意,我可以做。)

为此,并且说了这些,请大家带回答,因为我可能不完全理解上下文。我只是希望能帮到你。

所以在Ember你有路线。这些路由解释了您的应用程序的界面。这些将有效地成为你的国家。路线不是您的行为或事件。它们为您的应用提供了一个向世界展示自己的网址。

所以,A州似乎正在向学生们展示。你有两个子州...... 0名学生和> 0名学生。您可以使用相同的Route处理它们(称之为StudentsRou​​te),因为它们都是关于同一组数据,只是它们的不同子类。该路线可能有一条叫做/学生的路径。此时,您将通过路由器(学生列表)为控制器提供模型,因此,此控制器将是Em.ArrayController的扩展。

这个数组控制器(自动命名为StudentsController,扩展Em.ArrayController)自动拥有一个'模型',该模型一旦解析,就是学生“数组”。

在StudentsController中,您可以轻松拥有一个名为zeroCount的计算属性,该属性表示模型的零或无状态。计算属性自动保持最新。这个定义如下:

App.StudentsController = Em.ArrayController.extend({
  zeroCount: function() {
  // zeroCount is true if zero, otherwise false
    return this.get('model.length') == 0;
  }.property('model.length');
});

在学生模板中,您可以有条件地渲染两个子模板中的一个,具体取决于此zeroCount状态...您可以这样做:

{{#if zeroCount}}
  {{partial "noStudents"}}
{{else}}
  {{partial "someStudents"}}
{{/if}}

请注意,对于这个例子,这有点矫枉过正......你可能不需要像这样渲染其他模板(部分)......这是一种更简单的方法,因为这是一种常见的模式在ember中(渲染列表,如果没有任何项目,则可选择渲染其他内容,而不需要zeroCount属性)。

{{#each model}}
  <p>This renders against each student... <br>
  so if your students have a property called name, <br>
  then you could just write {{name}} and it'd render the
  students name</p>
{{else}}
  <p>This renders when there are no students</p>
{{/each}}

你会在每个项目上放置一个删除链接......并且实时绑定属性会为你处理所有状态...(因此,当模型中的项目为零时,模板会进入else块每个...否则它进入主要区块。)

删除操作,由#each模板模板(handlebars)指令中的Delete之类的内容处理,转到控制器并查找其中的一个操作,不出所料,删除......这看起来像这样:

App.StudentsController = Em.ArrayController.extend({
  actions: {
    delete: function(itemToDelete) {
      itemToDelete.delete();
      // assuming the model "class" understands delete
    }
  }
});

编辑状态将有自己的路线...可能是学生的嵌套路线,称为编辑,可能不依赖于您是否希望在编辑页面出现时列表显示在屏幕上...

“所做的更改”状态不是在路径上有效处理,而是在模型上...因为它应该是...模型负责持久化对象图,或告诉视图和控制器是否模型已经改变(例如,Ember Data,在每个模型实例上都提供了作为状态的Dirty,它可以告诉您它是否已经改变)...

希望这能激起你的胃口。我建议您浏览Ember网站上的一些示例......他们真的会提供帮助,如果您还没有检查过,请关注Ember TODOMVC应用程序......

在这些以流为基础的状态驱动的用户界面上,Ember茁壮成长......如果你还没有,请查看汤姆和耶胡达的主题演讲......他们谈论流动的方式与你谈论这些流程的方式完全相同国家和次国家。

希望有所帮助。