Ember.js - 为什么我的带有内联模板的视图没有显示

Ember.js - why is my View with inline template not displaying?

本文关键字:视图 显示 js 为什么 我的 Ember      更新时间:2023-09-26

>我正在尝试获取带有内联模板的视图,以显示在有条件的车把内。在我的应用程序代码中,如果我导航到另一条路由,然后再次返回,它就会显示出来。在小提琴中,我收到有关视图的错误。

JSFiddle

<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: '/'
    })
  })
});

我做错了什么?

App必须是全局的 - 如果您检查 JavaScript 日志,您可以看到 Handlebars 视图助手找不到名为 App.MyView 的视图。这是因为App是在本地声明的,因此模板无法访问它。将App定义更改为:

window.App = Ember.Application.create();

此外,您不需要扩展路由器。你可以只使用地图。例如

App.Router.map(function(){
  this.route('index', {path: '/'});
});

这是一个有效的JSFiddle:http://jsfiddle.net/PkT8x/420/