How do you switch views inside a view?
-
04-12-2019 - |
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?
La solution
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.