Javascript 使用状态机使我的UI简单灵活？好主意？我如何在淘汰赛中做到这一点？

我对击倒JS还不熟悉。我应该使用sammy.js来帮助我完成以下任务吗

我正在构建一个击倒JS应用程序（单页），当我从一个州移动到另一个州时，确切地说，哪些子面板是可见的，它们做了哪些更改。例如：

• 在登录之前，我有一个大面板邀请用户登录

• 登录后，我有一堆标签，一个主要的搜索区域和底部的广告

• 如果用户进行搜索，那么我将进入一种状态，在这种状态下，我们将看到选项卡、搜索区域和搜索结果区域

我想象通过一个状态机来实现这一点，当用户点击时，状态机从一个状态移动到另一个状态，就像解析器从一个状态移动到另一个状态一样

我想象将对象委托给当前状态，一个挂在ViewModel（也许）上的对象，这样我的20个左右不同的状态几乎就像20个非常简单的不同UI，每个UI彼此独立，简单、干净、易于理解

1-我如何做到这一点，让UI将子UI委托给挂在ViewModel上的子对象

2–有没有更好的方法让我的UI保持简单，即使它有很多状态，并且不同的状态在哪些元素（子面板）可见方面看起来彼此非常不同

3–有人举过代码反复委托给子用户界面的例子吗

---

我说得通吗

我使用的是一种方案，在该方案中，我只是有两个独立的状态可观测值——一个用于整个应用程序状态，另一个用于当前“页面”（选项卡，或“页面”对您意味着什么）。例如，在coffeescript中：

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

然后，在敲除可见绑定中，可以匹配特定状态或子状态：

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

---

一个可能非常适合的框架是-应该正是您想要的

这是一个来自英国jQuery的关于它的演示-
通常最好集中在一个特定的问题上，它会让你得到更多更好的答案你问了很多问题，但我想告诉你模板绑定。你可以将模板本身绑定到你的viewmodel，这样一个代表你整个应用程序的
content
div就可以这是Doug Neiner的一个很棒的演示，他现在使用了Machina.js，我可以保证它的效率和实用性！
<div data-bind='visible: applicationState().endsWith("page-foo")'>