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）时，将渲染图像，并且不会渲染其他内容。如果我然后导航到应用程序的另一部分，则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"}}

一切正常

Answer 1

问题显然是因为p（段落）标记内部不支持嵌套的script标记。

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

如果p元素紧跟地址，文章，旁边，blockquote，dir，div，dl，fieldset，footer，form，h1，h2，h3，h4，则可省略p元素的结束标记，h5，h6，header，hr，menu，nav，ol，p，pre，section，table ，或 ul 元素，或者如果父元素中没有更多内容，父元素不是元素。

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

因此，最好的方法是将内容包装在div中，然后按照与段落相同的方式对其进行格式化。

希望它有所帮助。

ember.js html输出坏了

1 个答案: