4

以下のワイヤーフレームの基本機能を備えたアプリをまとめるために、コントローラー、ビュー、その他の残り火の構成要素をうまく組み合わせるとしたらどうでしょうか。

私は詳細な実装を探しているのではなく、Emberアプリを構造化する方法と、コントローラー、ビュー、テンプレートなどを構成要素として推論する方法のインスピレーションを探しています。

私の仮定では、この画面はの下にContactsRouteあり、ContactsControllerはモデルArrayControllerを含んでContactいます（選択された状態はUIのみであり、永続化されていません）。

シンプルな連絡先ブラウザ

4

1 に答える 1

1

私は似たようなものを実行しているので、いくつかの考え：

ここに 2 つのレイアウト列があります。

Left Col : Controller が関連付けられた TreeNavView です。#/contacts (および #/contacts/) を入力すると選択されます

Right Col : Controller が関連付けられた ContactsView。ビューは、入力コントロールなどの小さなビュー アトムから組み立てることができます。

コントローラーに関する特記事項: 私の経験では、Ember では多かれ少なかれ、コントローラーとビューの間に 1:1 の関係を持たせる必要があります。そのため、コントローラーを共有することは悪いことであり、管理が困難です。

アプリケーション ビューには HTML/CSS レイアウトが含まれ、両方の列に 2 つのアウトレットがあります。

対応するビューをアウトレットにレンダリングする方法は? 左の列については、次のようにアプリケーション ビュー テンプレートからビューを直接「呼び出し」ます。

{{view App.TreeNav}}

対応するルーターマッピングを介して埋める「右アウトレット」：

this.route('contacts', {path: '/contacts'});

およびルート:

IB.ContactsRoute = Em.Route.extend({
    renderTemplate: function() {
          this._super();
          this.render('contacts', {into: 'application', outlet: 'secondCol'});
    }
});
于 2013-03-11T09:38:20.567 に答える