3

ノックアウト JS は初めてです。以下を支援するために sammy.js を使用する必要がありますか?

私は Knockout JS アプリ (単一ページ) を構築しています。状態から状態に移動すると、正確にどのサブパネルが表示され、何を行うかが変わります。例えば：

  • ログイン前に、ユーザーをログインに招待する大きなパネルが 1 つあります。

  • ログイン直後に、たくさんのタブ、検索用のメイン領域、および下部にある広告が表示されます。

  • ユーザーが検索を行うと、タブ、検索領域、および検索結果領域が表示される状態になります。

パーサーが状態から状態に移動するような方法で、ユーザーがクリックすると状態から状態に移動するステート マシンを使用してこれを行うことを想像します。

現在の状態、ViewModel からぶら下がっているオブジェクト (おそらく) に委任することを想像します。これにより、私の 20 ほどの異なる状態が、20 の非常に単純な異なる UI のようになり、それぞれが他のものから分離され、シンプルでクリーンで理解しやすくなります。

1 - これを行うにはどうすればよいですか? UI にサブ UI を ViewModel からぶら下がっているサブ オブジェクトに委譲させますか?

2 – UI には多くの状態があり、どの要素 (サブパネル) が表示されるかという点でさまざまな状態が非常に異なって見える場合でも、UI をシンプルに保つためのより良い方法はありますか?

3 – コードがサブ ユーザー インターフェイスに繰り返しデリゲートした例はありますか?

私は理にかなっていますか？

4

2 に答える 2

6

おそらく非常にうまく適合するフレームワークは、machina.jsです。まさに探しているものです。

これは、jQuery UK -ステートフル マシンからのプレゼンテーションです。

于 2013-05-03T19:45:32.173 に答える
1

私は単純に 2 つの個別の状態オブザーバブルを持つスキームを使用しています。1 つはアプリケーションの合計状態用で、もう 1 つは現在の「ページ」(タブ、または「ページ」が意味するもの) 用です。例として、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")'>
于 2013-05-03T19:39:12.317 に答える