与Ember.router并发的状态



我想使用Ember在Ember.js v1.5.x中实现这个状态图。路由器,但我在并发和历史机制方面有问题。

基本上,当我激活摘要路由/状态时,我想同时转换到无更改瞬态状态。我怎样才能做到这一点?

第页。S.我知道例如staticvus有这些功能,但不知道如何将其用于Ember.js路由。举个例子会很好。

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

:)

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

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

为此,话虽如此,请对我的回答持保留态度,因为我可能不完全理解上下文。我只是希望能帮上忙。

所以在Ember你有路线。这些路由解释了应用程序的接口。这些将有效地成为你们的状态。路线不是你的行动或事件。它们为你的应用程序提供了一个URL,让它向世界展示自己。

因此,州A似乎在向学生们展示。你有两个子州。。。0名学生和>0名学生。你可以用相同的Route(称之为StudentsRoute)来处理这些,因为它们都是关于同一组数据,只是不同的子状态。该路由可能有一个名为/students的路径。在这一点上,你会让一个控制器通过路由器(学生列表)获得一个模型,因此,这个控制器将是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模型模板(手把)指令中的delete之类的东西处理,它会到达控制器,并在其中寻找一个名为delete的操作,这不足为奇。。。看起来是这样的:

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

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

"所做的更改"状态不是在路线上有效处理的,而是在模型上。。。应该是…模型负责持久化对象图,或者告诉视图和控制器模型是否已经更改(例如,Ember Data在每个模型实例上提供isDirty作为状态,可以告诉你它是否已经更改)。。。

希望这能激起你的食欲。我建议浏览Ember网站上的一些例子。。。它们确实很有帮助,如果你还没有检查过的话,请关注Ember TODOMVC应用程序。。。

Ember在这些基于流的状态驱动UI上蓬勃发展。。。如果你还没有。。。他们谈论流动的方式与你谈论这些状态和子状态的方式完全相同。

希望能有所帮助。