3

MVCに関して、私のアプリの「残り火のベストプラクティス」を理解しようとしています。また、参考までに、ember-data、ember-layout、およびember-route-managerを使用しています。

例としてUserを使用します。

私がやりたいと思うのは、データベースからUserモデルを取得することです...次に、それをUserControllerでラップし、モデルを「content」プロパティに設定します...次に、ビューで、一部の機能の場合はコントローラー、モデルレベルのデータの場合はcontroller.content 。したがって、コントローラーは次のようになります。

App.UserViewController = Em.Object.create({   
    content: userRecord,
    isFollowingBinding : 'content.you_follow', 
    toggleFollow: function() { 
       make server call to change following flag 
    }
});

次に、ビューは{{controller.content.name}}、または{{#if controller.isFollowing}}、または{{action "toggleFollowing" target="controller"}}にバインドできます。

しかし、データベースからユーザーモデルのリストを取得したとしましょう...これらのモデルのそれぞれをコントローラーでラップし、リストとして返す必要があると思います...ビューはUserControllerのリストがあります

ちなみに、私はこれを実行しました...そしてそれはうまく機能しています....リストをリロードするたびに、すべての新しいモデルオブジェクトを新しいコントローラーでラップすることを除いて...そして時間の経過とともに、コントローラーの数メモリはどんどん大きくなります。基本のControllerクラスで、「destroy」への呼び出しをログに記録していますが、これが発生することはありません。

Em.Viewに関しては...画面から削除されるたびに、.destroy（）が呼び出しを受け取ることを知っています（私もそれらをログに記録しています）。したがって、コードをビューに移動すると、コードが毎回破棄されて再作成されることはわかっていますが、toggleFollow（）のような機能が表示されるとは思えません...

質問：

  • これはMVCがどのように機能することになっているのですか？そのモデルのコントローラーにラップされたモデルのすべてのインスタンス？1つの画面に多数のコントローラーインスタンスを作成できる場所はどこですか？
  • このアプローチを採用した場合、作成したすべてのコントローラーをdestroy（）する責任がありますか？
  • または、上記で説明した機能は実際にビューを対象としており、Emberは、画面に追加/削除されたときにそれらを作成/破棄しますか？また、テンプレート設計者が必要な機能を決定できるようにします（{{user.name}}が必要な場合は、他のコントローラー/ビュークラスをインスタンス化する必要はありません...ただし、「トグル」ボタンが必要な場合は、テンプレートのその部分を{{#viewApp.UserViewControllercontentBinding = "this"}}でラップします）

私はこれを数回書き直しました...うまくいけばそれは理にかなっています...

4

1 に答える 1

3

私はすべてuserを独自のコントローラーにラップしません。

代わりに、ユーザーをビューにバインドし、そのビューApp.UserViewでアクションtoggleFollowを処理します。このアクションは、サーバー呼び出しを処理するコントローラーにそのアクションを委任します。http://jsfiddle.net/pangratz666/hSwEZ/を参照してください。

ハンドルバー:

<script type="text/x-handlebars" >
    {{#each App.usersController}}
        {{#view App.UserView userBinding="this" controllerBinding="App.usersController"}}            
            {{user.name}}
            {{#if isFollowing}}
                <a {{action "toggleFollowing"}} class="clickable" >stop following</a>
            {{else}}
                <a {{action "toggleFollowing"}} class="clickable" >start following</a>
            {{/if}}
            {{#if user.isSaving}}saving ...{{/if}}
        {{/view}}
    {{/each}}
</script>​

JavaScript :

App.usersController = Ember.ArrayProxy.create({
    content: [],

    toggleFollowing: function(user) {
        user.set('isSaving', true);
        Ember.run.later(function() {
            user.toggleProperty('you_follow');
            user.set('isSaving', false);
        }, 1000);
    }
});

App.UserView = Ember.View.extend({
    isFollowingBinding: 'user.you_follow',
    toggleFollowing: function() {
        var user = this.get('user');
        var controller = this.get('controller');
        controller.toggleFollowing(user);
    }
});
​
于 2012-04-06T15:37:01.953 に答える