Question

I read this and it seemed to be the answer I was looking for but it doesn’t seem that I understand completely what’s going on. Dynamically choosing a view at runtime with Ember + Handlebars.

FWIW, the ember.StateManager as far as I understand can not work nested. So I wouldn’t be able to use it for a single page app that would switch between an application view and user profile view if the application view had sub-sections in it for example. So I figured there must be another way.

So a simple example to illustrate what I’m trying to do.

     (function($){
  window.APP = Ember.Application.create();
  /*models*/
  $.models = {};
  $.models.c = Ember.Object.create({
                    first_name: "joe",
                    last_name: "blow"
                });

  $.models.a = Ember.Object.create({
                    street:"1 wall street plaza",
                    city: "New York City",
                    state: "NY",
                    zip: "10101"
                });

  //views (sections of the application
  $.views = {};
  $.views.name = Ember.View.extend({template:Ember.Handlebars.compile("{{content.first_name}} {{content.last_name}}"),
                   contentBinding: "$.models.c"
                  });

  $.views.address = Ember.View.extend({template: Ember.Handlebars.compile("{{content.street}} {{content.city}} {{content.state}} {{content.zip}}"),
                 contentBinding: "$.models.a"});

  //something to hold the current view(section)
  $.navmodel = Ember.Object.create({current:$.views.address});

  //view to display the current view(section)
  $.nav = Ember.View.create({template: Ember.Handlebars.compile("{{view current}}"),
                   currentBinding: "$.navmodel.current"
                  }); 

  //add to page
  $.nav.appendTo("#content");

  //switch between the pages
  setTimeout(function(){
        $.navmodel.set("current", $.views.name);
        alert("set");
    },1000);
 })(jQuery);

Yes I realize Ember.StateManager could be used for this, but if I then needed to have nested subviews the StateManager wouldn’t work would it?

Answer 1

First, I do believe that the Ember StateManager does handle nested states. I can’t give you a concrete example though. I have played a bit with states but that part of Ember.js wasn’t yet stable enough so I stopped in frustration.

As far as switching views without using a StateManager, this is totally doable. Try swapping your $.nav View with a ContainerView. Something like this should do the trick (beware, untested code!):

$.nav = Ember.ContainerView.create({
    switchView: function(view) { 
        var childViews = this.get("childViews"); 
        childViews.popObject();      // Remove the current view, if any
        childViews.pushObject(view); // Add the requested view
    }, 
});

The Ember documentation has a section about the ContainerView which you should take a look at.