ember.js - 在给定的 HTML 标记中包含一个 EmberJS 应用程序

Question

HTML

标题

`<script type="text/x-handlebars" data-template-name="application">  
    {{view App.NavbarView}}  
    {{outlet}}  
</script>`  

页脚

JS

`App.ApplicationController = Em.Controller.extend();  
App.ApplicationView = Em.View.extend({  
  templateName: 'application'  
});`  

App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',

root: Em.Route.extend({
  // EVENTS
  gotoAbout: Ember.Route.transitionTo('about'),

  // STATES
  about: Em.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {
      router.get('applicationController').connectOutlet('about');
    }
  })

我想删除data-template-name="application"，因为我想立即在这段代码的位置（在页眉和页脚之间）显示它。

但是当我删除它并且templateName: 'application'路由器不工作时。

问题是：如何显示块

<script type="text/x-handlebars" data-template-name="application">  
  {{view App.NavbarView}}  
  {{outlet}}  
</script>

页眉和页脚之间。

我知道我可以编写<div id="content"></div>和使用.appendTo("content")但可能存在更优化的方式？

Answer 1

您是否尝试设置 App 的rootElement属性？

App = Ember.Application.create({
  rootElement: '#app-container'
});

你在这里有一个例子，你可以很容易地推导出来。