Controller Strategy / Garbage Collection (destroy)

Question

Trying to figure out the "ember best practices" for my app, regarding MVC. also for reference, I'm using ember-data, ember-layout, and ember-route-manager.

I'll use User as an example:

what I feel like I want to do is to get a User model from the database... then wrap it in a UserController, and set the model on a "content" property... then in a View, I want to bind to the controller for some functionality, and to the controller.content for model-level data. so a controller might look something like:

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

then the view could bind to the {{controller.content.name}}, or {{#if controller.isFollowing}}, or {{action "toggleFollowing" target="controller"}}

but say I get a list of User models back from the database... I feel like what should happen is that each of those models should be wrapped with a controller, and that should be returned as a list... so the view would have a list of UserControllers

Incidentally, I've done this... and it is working nicely.... except that everytime I reload the list, I wrap all of the new model objects with new controllers... and over time, the # of controllers in memory get larger and larger. on my base Controller class, I'm logging calls to "destroy", and I dont see it ever happening

when it comes to Em.View... I know that everytime it is removed from the screen, .destroy() gets calls (I am logging those as well). so if I were to move my code into a view, i know it will get destroyed and recreated everytime... but I dont feel like the functionality like toggleFollow() is supposed to be in view...

SO QUESTIONS:

• is this how MVC is supposed to work? every instance of a model wrapped in a controller for that model? where there could be lots of controller instances created for one screen?
• if I go down this approach, then I'm responsible for destroy()ing all of the controllers I create?
• or is the functionality I've described above really meant for a View, and them Ember would create/destroy them as they are added/removed from the screen? also allowing template designers to decide what functionality they need (if they just need the {{user.name}}, theres no need to instantiate other controller/view classes... but if they need a "toggle" button, then they could wrap that part of the template in {{#view App.UserViewController contentBinding="this"}} )

I re-wrote this a few times... hopefully it makes sense....

Answer 1

I wouldn't wrap every user into an own controller.

Instead I would bind the user to a view, say App.UserView and handle the action toggleFollow on that view. This action will then delegate it's action to a controller which will handle the server call, see 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);
    }
});
​