CODEWITHSUNDEEP
ember.jsviewrenderingember-old-router
Asha
Asha

Reputation: 259

Ember.js - how do I bind a view to a state manager, and ensure that view is rendered?

I am using a StateManager to control the state of a pop-up modal (e.g., the states are "open.edit", "open.show" and "closed"). I'd like to use a state manager here because the modal is quiet complex and requires it's own transaction (I'm using Ember data).

I am able to set the appropriate data, view and controller on my ModalStateManager.

However, the view (in this case App.ModalView) is never rendered in the DOM. I know this because I've put logging statements in didInsertElement function of my App.ModalView, and those never get logged.

How can I render the view when someone clicks the button to open the modal?

Here's the code that is run on my ModalStateManager when someone clicks to open the modal.

App.ModalStateManager = Ember.State.create({

  closed: Ember.State.create({
    open: function(manager, modalData) {
      var view = App.router.get('applicationController').connectOutlet("modal", modalData); 
      //this is working
      //the view returned is the ModalView; it has a ModalController with expected content

     manager.transitionTo('open.show'); 
    }
  })

  //omitting other states for simplicity
)}

Larger question: How should you build a view that has multiple states and dynamic data, but does not have its own url or state within the router? e.g., Imagine a page with a list of unique items. Clicking an item pops open a modal that shows the item content, allowing the user to edit and save it. The modal doesn't have its own url or state in the router, so its not as easy as setting a dynamic state /:item_id in the router that can be easily wired and updated.

Upvotes: 1

Views: 313

Answers (1)

Luke Melia
Luke Melia

Reputation: 8389

In one of our apps, we have a PanelManager (subclass of StateManager) that handles state for our modals. There is also a PanelController, which has properties that our panel container view binds to for className and visibility. When transitioning from closed to a particular open state (e.g. showingEditPanel), the manager sets the classname and visibility properties and calls connectOutlet on the panelController to show the correct view/controller combo within the panel container. Additional complexity can be modeled with nested states under each open state.

Upvotes: 2

Related Questions