Ember，在动态模板中渲染内容

Question

我运行在如何在我无法控制的一些动态 HTML 内容中渲染内容方面遇到了一些困难，Ember v1.13.1 .在这种特殊情况下，我从服务调用中获取导航头和导航脚并将它们放入我的组件中：

export default Ember.Component.extend({
  // I don't control these. They come from somewhere else
  bodyStart: '<div class="header">...</div><div class="contentBody">',
  bodyEnd: '</div><footer>...</footer>',
});

因此，在我的组件模板中，我正在尝试执行以下操作：

{{{bodyStart}}}
{{yield}}
{{{bodyEnd}}}

我希望将收益内容放在 <div class="contentBody"> 元素内，但事实并非如此。相反，内容正文在 {{yield}} 之前关闭，而 bodyEnd 关闭 div 将被忽略。

我可能只是遗漏了一些明显的东西。任何有关如何解决此问题的想法都将不胜感激。

干杯

Answer 1

我相信发生的情况是每个 {{{variable}}} 都是独立构建并独立插入到 DOM 中，这导致未闭合的 DOM 节点被关闭。我能想到的唯一方法是包含模板编译器并使用 bodyStart 和 bodyStop 重新编译模板。

App.ContentWrappedComponent = Ember.Component.extend({
  startBody: '',
  endBody: '',
  layout: function(){
    return Ember.HTMLBars.compile(
      this.get('bodyStart') + 
      '{{yield}}' + 
      this.get('bodyEnd')
    );
  }.property('bodyStart', 'bodyEnd')
});

您还需要添加到您的 Brocfile.js:

app.import('bower_components/ember/ember-template-compiler.js');

JSBin: http://emberjs.jsbin.com/ticituxapa/3/edit?html,css,js,output

Ember，在动态模板中渲染内容

Ember, rendering content in a dynamic template

javascript

ember.js

ember-cli

htmlbars