0

Ember.Router を使用して Ember.js v1.5.x でこのステートチャートを実装したいのですが、並行性と履歴メカニズムに問題があります。

基本的に、Summaryルート/状態をアクティブにすると、 No changes madeとTransient状態に同時に遷移したいと思います。どうすればこれを達成できますか？

PS たとえば、スタティバス にはこれらの機能があることはわかっていますが、Ember.js ルーティングでそれを使用する方法がわかりません。例は良いでしょう。

(画像ソース: Ian Horrocks: Constructing the User Interface With Statecharts p.153)。

4

1 に答える 1

1

:)

ええ、ステートチャートは素敵ですが、Ember は実際には、計算されたプロパティを通じてサブステートを提供します。

私はステート チャートにあまり詳しくないので、ここで言及したリソース (horrocks) を実際に消費する必要があります ( https://github.com/emberjs/ember.js/issues/4767#issuecomment-41458710 ) 。私はその特定の例の命名法に完全に精通しています（必要に応じて行うことができます）。

そうは言っても、文脈を完全に理解していない可能性があるため、私の答えを一粒の塩で受け取ってください。私はただ助けたいと思っています。

つまり、Ember にはルートがあります。これらのルートは、アプリケーションのインターフェースを説明しています。これらは事実上あなたの状態になります。ルートはアクションやイベントではありません。これらは、アプリが世界に公開されるための URL を提供します。

したがって、状態 A は生徒を提示しているようです。そこには 2 つのサブ州があります... 0 人の学生と >0 人の学生。これらは同じルート (StudentsRou​​te と呼びます) で処理します。これは、どちらも同じデータ セットに関するものであり、サブステートが異なるだけであるためです。ルートには、おそらく /students という名前のパスがあります。その時点で、ルーター (生徒のリスト) によってコントローラーにモデルが供給されるため、このコントローラーは Em.ArrayController の拡張になります。

この配列コントローラー (自動で StudentController と命名され、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 の状態に応じて、2 つのサブテンプレートのいずれかを条件付きでレンダリングできます。次のようにします。

{{#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 のようなものによって処理される削除アクションは、コントローラーに行き、その中のアクションを探します。

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 で成功しています... Confreaks での Tom と Yehuda の基調講演をまだチェックしていない場合はチェックしてください... これらの状態とサブルーチンについて話しているのとまったく同じ方法でフローについて話しています。 -状態。

それが役立つことを願っています。

于 2014-04-26T04:05:38.670 に答える