0

我想使用 Ember.Router 在 Ember.js v1.5.x 中实现这个状态图，但是并发和历史机制存在问题。

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

PS 我知道例如stativus 具有这些功能，但不知道如何将它与 Ember.js 路由一起使用。一个例子很好。

（图片来源：Ian Horrocks：使用状态图构建用户界面，第 153 页）。

4

1 回答 1

1

:)

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

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

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

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

因此，状态 A 似乎正在呈现学生。您在那里有两个子州... 0 个学生和 >0 个学生。您将使用相同的 Route（称为 StudentRoute）来处理这些，因为它们都是相同的数据集，只是它的不同子状态。该路线可能有一条名为 /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 上蓬勃发展...如果您还没有的话，请查看 Tom 和 Yehuda 在 confreaks 上的主题演讲...他们谈论流的方式与您谈论这些状态和子的方式完全相同-状态。

希望有帮助。

于 2014-04-26T04:05:38.670 回答