使用状态机使我的UI保持简单和灵活?好主意?我该如何在淘汰赛中做到这一点

Question

我是淘汰赛JS的新手。我应该使用sammy.js来帮助我以下？

我正在建立一个淘汰JS应用程序（单页），在我从状态到状态时，确切可见的子面板以及它们所做的工作会改变。例如：

• pre-login，我有一个邀请用户登录的大面板。

• 登录后，我有一堆选项卡，搜索的主要区域和底部的广告。

• 如果用户进行搜索，那么我最终处于一个状态，在该状态下，我们看到了选项卡，搜索区域和搜索结果区域。

我想通过拥有一台状态计算机在用户点击时从状态转移到状态的状态计算机，这是解析器从状态到状态转移的方式。

我想象与当前状态的委派，一个悬挂在ViewModel（也许）的对象，以便我的20个左右的状态几乎像20个非常简单的UI，每个uis都与其他状态分开，简单，干净，易于理解。

1-我该怎么做，将UI委派给悬挂在ViewModel上的子对象？

2 - 尽管有很多状态和不同的状态在哪些元素（Sub Panels）可见的角度上，还有一种更好的方法可以使我的UI保持简单？

3 - 是否有人有示例是代码反复委托给子用户界面？

我有意义吗？

Answer 1

一个可能非常适合的框架是machina.js-应该只是您要寻找的。

这是来自英国JQuery的演示文稿-Sateful Machines

Answer 2

我正在使用一个方案，其中我只有两个单独的状态可观察结果 - 一个用于总应用程序状态，一个用于当前的"页面"（TAB，或任何"页面"的含义为您）。在Coffeescript中，例如：

@currentState('logged-in')
@currentPage('page-foo')
@applicationState = ko.computed => "#{@currentState()}:#{@currentPage()}"

然后在敲除可见绑定中，您可以在特定状态或替代：

上匹配：

<div data-bind='visible: applicationState() == "logged-in:page-foo">

，也可以进行部分匹配：

<div data-bind='visible: applicationState().endsWith("page-foo")'>