1

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

给定以下模板：

<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 为真），图像被渲染，而 else 没有被渲染，因为它应该。如果我随后导航到应用程序的另一部分，则 isDashboard 变为 false，并且 navigationIcon 和 navigationSelectMenu 将按应有的方式呈现在 p-tag 中。到目前为止一切都很好。

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

通过仪表板导航时的 HTML 输出（良好的输出），所有的变形标记都正确嵌套：

<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-tag 开始，但随后 p 关闭，然后是内容，然后是另一个 p-tag。

<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"}}

一切正常

4

1 回答 1

2

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

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

如果 p 元素后面紧跟着address、article、aside、blockquote、dir、div、dl、fieldset、footer、form、h1、h2、h3、h4、h5、h6、header，则可以省略 p 元素的结束标记、hr、menu、nav、ol、p、pre、section、table或ul元素，或者如果父元素中没有更多内容且父元素不是 a 元素。

这也是为什么当你使用div一切都很好的原因。恕我直言，这不是余烬问题，而是与p标签的限制有关。

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

希望能帮助到你。

于 2013-09-30T13:44:44.310 回答