Question

Recently I’ve been studying Ember.js for a number of upcoming projects. The documentation on proper architecture when using the Ember.Router seems rather sparse. One thing that I’ve noticed about the router is that it seems like all views are bound to the router context instead of to their Controller or even View contexts. So action items in views require a method in the router and do not work for methods in the View or Controller objects.

Example (in coffeescript):

window.App = Ember.Application.create {

    ApplicationController = Ember.Controller.extend()
    ApplicationView = Ember.View.extend
        templateName: 'application'

    FlavorMenuController = Ember.ArrayController.extend
        ##Assume an extension of Ember.Object for a model called DrinkFlavors
        content: []
        promoted_drink_flavor: null

        init: () ->
            @_super()
            ##Assume a method actually chooses a random a drink flavor to promote
            @choosePromotedDrinkFlavor()

        optForNewPromotion: () ->
            dont_include = [ @promoted_drink_flavor ]
            @choosePromotedDrinkFlavor( dont_include )

    FlavorMenuView = Ember.View.extend
        templateName: 'flavor_menu_view'

    Router: Ember.Router.extend
        root: Ember.Route.extend
            flavorMenu: Ember.Route.extend
                route: '/'
                connectOutlets: (router, event) ->
                    router.get('applicationController').connectOutlet('flavorMenu')
}

Now if I had a template like

<script type="text/x-handlebars" data-template-name="flavor_menu_view">
    <!-- ASSUME SOME VIEW STUFF HERE MAKING UP A MENU OF FLAVORS YOU CAN ORDER -->
    <a {{action optForNewPromotion}}> Ask for another promoted Item </a>
</script>

The action optForNewPromotion will not work and will complain about there not being a route for this. If you want this to work, you have to add to the router.

So somewhere in the router path you’d need to add

optForNewPromotion: (router, event) ->
    router.get('flavorMenuController').optForNewPromotion

Or you could just move the functionality for that whole method into the router.

This seems like bad architecture to either duplicate method signatures or move traditional controller behavior into the route.

Are there any better design patterns that still make use of the Router?

Answer 1

This post Ember.js Router Action to Controller answers the question.

Use the {{action "foo" target="controller"}} call