Question

我最终希望我的应用程序的html结构如下所示：

<body>
    <div id="wrapper"></div>
    <div id="footer"></div>
</body>

我的应用程序的根元素是默认的body元素。但我的“应用程序视图”是body标签内的所有内容（如上所列）。页脚可能包含与ApplicationController绑定的元素，因此需要将其包含在应用程序模板中。

我认为这样做是这样的：

<body>
    <script type="text/x-handlebars">
        <div id="wrapper"></div>
        <div id="footer"></div>
    </script>
</body>

但是这会产生以下结构，这是不可取的：

<body>
    <div>
        <div id="wrapper"></div>
        <div id="footer"></div>
    </div>
</body>

然后，我可以将ApplicationView更改为以下based on this answer。

App.ApplicationView = Ember.View.extend({
    tagName: ""
});

Ember现在在the current version of ember

的第18779行抛出异常：Uncaught TypeError: Cannot read property 'tagName' of null

DEBUG: -------------------------------
DEBUG: Ember      : 1.2.1+pre.ce3a6b7c
DEBUG: Ember Data : 1.0.0-beta.4+canary.7af6fcb0
DEBUG: Handlebars
DEBUG: jQuery
DEBUG: -------------------------------

所以我不确定如何使用应用程序root创建建议的html结构。任何提示或指导将不胜感激！

Answer 1

我会使用outlets。虽然，这取决于您的申请。

application模板：

<script type="text/x-handlebars">
  {{outlet wrapper}}
  {{outlet footer}}
</script>

ApplicationRoute代码：

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('wrapper', {
      outlet: 'wrapper'
      controller: 'application'
    });
    this.render('footer', {
      outlet: 'footer',
      controller: 'application'
    });
  }
});

如何通过App.ApplicationView /应用程序模板创建此html结构？

1 个答案: