Ember statemanager，controller，view，model：如何将它们链接在一起？

Question

I'm facing a problem where I need to link state manager, controller and view together and at the same time avoid to get an ugly spaghetti code. And the question is : which of these object should be created first and has the responsibility to create the others ?

To be specific, here is my example. First the view is a subclass of a container view that has a collection view as child :

App.MyView = Ember.ContainerView.extend {

     childViews: ['streamView']

     streamView: Ember.CollectionView.extend {
     }

}

The controller is just as subclass of Ember.ArrayController with a load method :

App.MyController = Ember.ArrayController.extend {
     load: ->
        console.log "loading data"
}

The state manager has a view state which will instantiate App.MyView :

App.MyStateManager = Ember.StateManager.extend {

   initialeState: 'ready'

   ready: Ember.ViewState.extend {

        view: App.MyView    

   }
}

Now I need to run the following test :

 controller = App.MyController.create {}
 manager = App.MyStateManager.create {}

 expect(manager.getPath('currentState.name').toEqual('ready')
 expect(controller.load).toHaveBeenCalled()
 streamView = manager.getPath('currentState.view.streamView.content')
 expect(streamView.content).toEqual(controller.content)

In order to make the last expectation to work, I need to bind the content of my streamView that is a child of App.MyView with the controller content. How can I do this cleanly ?

Furthermore, how to pass a reference to the state manager to the view and the controller in order to notify the manager when some event occur so it need to transit to another state. For example a click on an item or controller did finish a job ?

Answer 1

Take a look at this gist by Yehuda Katz discussing the new router implementation. https://gist.github.com/2728699

The suggestion seems to be to make the router and by extension the state manager the point at which the 3 layers are tied together.