javascript - ember.js html 输出损坏

Question

我在尝试调试以下失败原因时遇到了很多麻烦:

给定以下模板:

<p class='navbar-text pull-right header-user-info'>
{{#if currentUser.isSignedIn}}
  {{#if view.isDashboard}}
    <img {{bindAttr src="currentUser.avatar" title="currentUser.fullName"}} class='avatar'>
  {{else}}
    {{view PR2.NavigationSelectMenuView selectedBinding="view.selected"}}
    {{navigationIcon selectedBinding="view.selected"}}
  {{/if}}
  <span class='user-info'>
    aangemeld als {{currentUser.fullName}}
    {{#link-to 'session.destroy'}}log uit{{/link-to}}
  </span>
{{/if}}
</p>

和 PR2.NavigationSelectMenuView 如下:

PR2.NavigationSelectMenuView = Em.View.extend({
  tagName: 'ul'
});

当我转到仪表板时(view.isDashboard 为 true)，图像被渲染，而 else 没有渲染，这是应该的。如果我然后导航到应用程序的另一部分，则 isDashboard 变为 false，并且 navigationIcon 和 navigationSelectMenu 会在 p-tag 中按应有的方式呈现。到目前为止一切都很好。

当我直接从另一条路线进入我的应用程序并跳过仪表板时，问题就来了，例如，我转到/settings。 isDashboard 为 false，而是呈现 2 个 View 。但是 html 输出被破坏了:

在仪表盘中导航时的 HTML 输出(良好的输出)，所有的 metamorph 标签都正确嵌套:

<p class="navbar-text pull-right header-user-info">
  <script id="metamorph-0-start" type="text/x-placeholder"></script>
  <script id="metamorph-1-start" type="text/x-placeholder"></script><script id="metamorph-1-start" type="text/x-placeholder"></script>
  <ul id="ember511" class="ember-view"></ul>
  <span id="ember514" class="ember-view avatar settings-icon"></span>
  <script id="metamorph-1-end" type="text/x-placeholder"></script>
  <span class="user-info">
    <span id="i18n-0">aangemeld als</span> <script id="metamorph-2-start" type="text/x-placeholder"></script>username<script id="metamorph-2-end" type="text/x-placeholder"></script>
    <a id="ember424" class="ember-view loading" href="#"><span id="i18n-1">log uit</span></a>
  </span>
  <script id="metamorph-0-end" type="text/x-placeholder"></script>
</p>

直接导航到另一个页面时的 HTML 输出(错误的输出)，变形从 p 标签开始，但随后 p 关闭，然后是内容，然后是另一个 p 标签。

<p class="navbar-text pull-right header-user-info">
  <script id="metamorph-0-start" type="text/x-placeholder"></script>
  <script id="metamorph-1-start" type="text/x-placeholder"></script>
</p>
<ul id="ember444" class="ember-view"></ul>
<span id="ember447" class="ember-view avatar settings-icon"></span>
<script id="metamorph-1-end" type="text/x-placeholder"></script>
<span class="user-info">
  <span id="i18n-0">aangemeld als</span>
  <script id="metamorph-2-start" type="text/x-placeholder"></script>username<script id="metamorph-2-end" type="text/x-placeholder"></script>
  <a id="ember448" class="ember-view loading" href="#"><span id="i18n-1">log uit</span></a>
</span>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
<p></p>

奇怪的是，如果我省略这一行:

{{view PR2.NavigationSelectMenuView selectedBinding="view.selected"}}

一切正常

Answer 1

问题很明显是因为p(段落)标签不支持在里面嵌套script标签。

取自:http://www.w3.org/TR/html-markup/p.html

A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.

这也是为什么当你使用 div 时一切正常的原因。恕我直言，这不是 ember 问题，而是与 p 标签的限制有关。

因此，要走的路是将内容包装在 div 中，并按照处理段落的方式对其进行格式化。

希望对您有所帮助。