JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.4.min.js"></script>
<script type="text/x-handlebars">
Current state: {{App.stateManager.currentState.name}}
<a href="#" onclick="App.stateManager.goToState('one');return false">Go to one</a>
<a href="#" onclick="App.stateManager.goToState('two');return false">Go to two</a>
</script>
<script type="text/x-handlebars" data-template-name="viewStateOne">
One
</script>
<script type="text/x-handlebars" data-template-name="viewStateTwo">
Two
</script>
<script type="text/x-handlebars" data-template-name="viewStateThree">
Three
</script>
JavaScript
App = Ember.Application.create();
App.stateManager = Ember.StateManager.create({
initialState: "one",
one: Ember.ViewState.create({
view: Ember.View.create({
templateName: "viewStateOne"
}),
two: Ember.ViewState.create({
view: Ember.View.create({
templateName: "viewStateTwo"
})
}),
showTwo: function(manager) {
manager.goToState("two");
}
}),
showOne: function(manager) {
manager.goToState("one", function(){
Response.write("teswt");
});
},
three: Ember.ViewState.create({
view: Ember.View.create({
templateName: "viewStateThree"
})
}),
showThree: function(manager) {
manager.goToState("three");
}
});
App.stateManager.send("showTwo");
/*
Okay, we're in state two now, so the view is appended below the view
for state one. Uncomment the following line and run it again. You'll
see that the StateManager will indeed go back to the state one.
However, the view for state two will not be removed.
*/
App.stateManager.send("showOne");
/*
Now comment it again and just use the links this time to switch between
states. It should work as you would expect. So perhaps this is a timing issue?
*/
/*
I see all three views when I uncomment the line below. Yikes...
*/
App.stateManager.send("showThree");