I'm trying to get a view with an inline template to display inside a handlebars conditional. In my application code, it shows up if I navigate to another route and then back again. In the fiddle, I get an error about the view.
<script type="text/x-handlebars" data-template-name="application">
<h1>If you click that button, I might say 'Hello!'</h1>
<button {{action 'click_me'}}>Click me</button>
{{#if controller.new_visible}}
{{#view App.MyView}}
Hello! {{/view}}
{{/if}}
</script>
var App = Ember.Application.create();
App.MyView = Ember.View.extend({});
App.ApplicationController = Ember.Controller.extend({
new_visible: false,
actions: {
click_me: function() {
alert('You clicked me!');
this.set('new_visible',true);
}
}
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
});
What am I doing wrong?
App
must be a global - if you check the javascript log, you can see that the handlebars view helper can't find a view named App.MyView
. That's because App
is being declared locally, so the template can't get to it. Change the App
definition to this:
window.App = Ember.Application.create();
Also, you don't need to extend the router. You can just use map. eg
App.Router.map(function(){
this.route('index', {path: '/'});
});
Here's a working JSFiddle: http://jsfiddle.net/PkT8x/420/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.