ember.js - Controller 策略/垃圾收集(销毁)

Question

尝试为我的应用找出关于 MVC 的“ember 最佳实践”。同样作为引用，我正在使用 ember-data、ember-layout 和 ember-route-manager。

我将以用户为例:

我觉得我想做的是从数据库中获取用户模型...然后将其包装在用户 Controller 中，并将模型设置为“内容”属性...然后在 View 中，我想要绑定(bind)到 controller 以获得某些功能，并绑定(bind)到 controller.content 以获取模型级数据。所以 Controller 可能看起来像:

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

然后 View 可以绑定(bind)到 {{controller.content.name}}，或 {{#if controller.isFollowing}}，或 { {action "toggleFollowing"target="controller"}}

但是假设我从数据库返回了一个用户模型列表...我觉得应该发生的是每个模型都应该用一个 Controller 包装，并且那个 应该作为列表返回...所以 View 将有一个 UserControllers 列表

顺便说一句，我已经这样做了……而且工作得很好……除了每次我重新加载列表时，我都会用新 Controller 包装所有新模型对象……随着时间的推移，#内存中的 Controller 数量越来越大。在我的 Controller 基类上，我正在记录对“destroy”的调用，但我没有看到它发生过

当谈到 Em.View 时...我知道每次它从屏幕上移除时，.destroy() 都会收到调用(我也记录了这些调用)。所以如果我将我的代码移动到一个 View 中，我知道它每次都会被销毁并重新创建......但我不觉得像 toggleFollow() 这样的功能应该在 View 中......

所以问题:

• 这就是 MVC 应该如何工作的吗？模型的每个实例都包裹在该模型的 Controller 中？哪里可以为一个屏幕创建大量 Controller 实例？
• 如果我采用这种方法，那么我要负责销毁()我创建的所有 Controller ？
• 或者我上面描述的功能真的是针对 View 的，Ember 会在将它们添加到屏幕上/从屏幕上删除时创建/销毁它们？还允许模板设计者决定他们需要什么功能(如果他们只需要 {{user.name}}，则无需实例化其他 Controller / View 类......但如果他们需要“切换”按钮，然后他们可以将模板的那部分包装在 {{#view App.UserViewController contentBinding="this"}} )

我重写了几次...希望它有意义....

Answer 1

我不会将每个 user 包装到一个自己的 Controller 中。

相反，我会将用户绑定(bind)到一个 View ，比如 App.UserView 并处理该 View 上的操作 toggleFollow。然后此操作会将其操作委托(delegate)给将处理服务器调用的 Controller ，请参阅 http://jsfiddle.net/pangratz666/hSwEZ/

Handlebars :

<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);
    }
});
​