templates - Ember 動的 MVC とテンプレート

Question

私は Ember.js 1.0.0-rc.3 を学習しています。「動的 MVC」アプリを作成する適切な方法を知りたいです。「動的 MVC」とは、インデックスページにアクセスしたときに唯一のコンテンツがエンティティ名のコレクションであることを意味します。残りは動的に生成されます。つまり、モデル (データ)、最終的にはコントローラーの特定のアクション、および特にテンプレートです。

これが私が達成しようとしていることです:エンティティのコレクションがあります([「ユーザー」、「顧客」、「請求書」など])。各エンティティのルートは次のようになると思います。

.../#/user/
.../#/customer/
.../#/invoice/

for each entity name

this.resource(" entity name lower case");

説明を簡単にするために、エンティティルートを押すと、2 つのリンクを含むビューが表示されます。1 つは新しいエンティティを作成するためのもので、もう 1 つはエンティティのリストを表示するためのものです。ルートは次のようになります。

.../#/user/                => will display a "Create" link and "List" link
.../#/user/create/         => sub route to display a form to create a User
.../#/user/list/           => sub route to display a collection of existing Users

.../#/customer/
.../#/customer/create/
.../#/customer/list/

...etc...

現在、サブルートのテンプレート (「.../#/user/create/」、「.../#/user/list/」など) は存在しませんが、代わりにオンデマンドでロード/作成されます. これは SSD (スケッチ、スキーマ、データ) という名前の新しい UI デザインパターンの一部であり、スケッチ (ビューのスケルトン)、スキーマ (そのビューに固有) に基づいてテンプレートが生成されます。アクションについても同じです。

1) 最初の質問. 最終的に 100 エンティティ以上になる可能性があることを知っていますが、ルートごとにコントローラー、モデル、ビューを使用するのは正しいアプローチですか? そして、サブルートも...インデックスページにアクセスしたときにこれらすべてのオブジェクトが作成されるため、ここでのパフォーマンスが少し心配です。

現在のサンプルでは、次の Ember オブジェクトを使用します。

UserController, UserRoute, UserView
UserCreateController, UserCreateRoute, UserCreateView
UserListController, UserListRoute, UserListView
CustomerController, CustomerRoute, CustomerView
CustomerCreateController, CustomerCreateRoute, CustomerCreateView
CustomerListController, CustomerListRoute, CustomerListView
etc.
//it becomes easily heavy

複数のパスを同じ MVC オブジェクトにリンクしようとしましたが、現在使用されているエンティティを特定するのは困難です。実行可能であれば、現在のパスを分析することは本当に醜いようです。例えば：

this.resource('entity', { path: '/' + user });
this.resource('entity', { path: '/' + customer });
this.resource('entity', { path: '/' + invoice });
//all attached to EntityController, EntityView and EntityRoute
//Could be working but hard to identity which entity User, Customer or Invoice is really used

this.resource('entity.create', { path: '/' + user + '/create' });
this.resource('entity.create', { path: '/' + customer + '/create' });
this.resource('entity.create', { path: '/' + invoice + '/create' });
//Same for EntityCreate

私も this.controllerFor('entity'), this.controllerFor('entity.create'), this.controllerFor('entity.list') を使用しようとしましたが、これはオブジェクトの数を減らさず、コードを作成します必要以上に複雑です。

2) 2 番目の質問: 動的テンプレートで作業できるようにするために、テンプレートとモデルの作成に使用される必要な SSD をロードする ajax 呼び出しを使用して setController() を実装します。テンプレートを Ember.TEMPLATES[ template name] に保存し、データプロパティを変更して、Route の renderTemplate にオブザーバーをアタッチします。

テンプレートを動的に変更する適切な方法ですか?

以下にサンプルを示します (テストはしていません。テンプレートとモデルのロード/変更のプロセスを確認するためだけです)。

App["UserCreateRoute"] = Ember.Route.extend({
    templateName: "loading",  //display a temporary template while loading the template
    renderTemplate: function() {
        this.render(this.get('templateName'), {
            ///...
        });
    }.observes("templateChanged"),

    setupController: function(controller, model) {

        var self = this;

        $.when(` ajax load `).done(function( response ) {

            var templateName = xxx;  // based on the entity for instance "user/create"

            if (`template doesn't exist`) {
                Ember.TEMPLATES[templateName] = CreateMyTemplate( response );
                self.set("templateName", templateName);
            }

            //also change the model
            self.set("data", reponse.someData );

            //eventually add method to the controller?
            //...

            //tell renderTemplate to re-render
            self.set("templateChanged", new Date());

        })
    },

    model: function(params) {
        //simplified for sample
        return this.get("data")
    }
})

少し長いですが、読んでいただきありがとうございます！

templates - Ember 動的 MVC とテンプレート

0 に答える 0

Related

Reference