3

我是 Knockout JS 的新手。我应该使用 sammy.js 来帮助我完成以下任务吗？

我正在构建一个 Knockout JS 应用程序（单页），当我从一个状态移动到另一个状态时，哪些子面板是可见的以及它们所做的改变。例如：

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

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

  • 如果用户进行搜索，那么我最终会处于看到选项卡、搜索区域和搜索结果区域的状态。

我想通过让状态机在用户点击时从一个状态移动到另一个状态来做到这一点，就像解析器从一个状态移动到另一个状态一样。

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

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

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

3 – 有没有人有代码重复委托给子用户界面的例子？

我说得有道理吗？

4

2 回答 2

6

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

这是来自 jQuery UK 的一个演示文稿 -有状态的机器

于 2013-05-03T19:45:32.173 回答
1

我正在使用一种方案，其中我只有两个独立的状态可观察对象 - 一个用于总应用程序状态，一个用于当前“页面”（选项卡，或任何“页面对您意味着”）。在咖啡脚本中，例如：

@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")'>
于 2013-05-03T19:39:12.317 回答