余烬.js HTML 输出损坏

ember.js html output broken

本文关键字：损坏 输出 HTML js 余烬      更新时间：2023-09-26

我在尝试调试为什么以下内容失败时遇到了很多麻烦：

给定以下模板：

<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。导航选择菜单视图，如下所示：

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

当我转到仪表板(并且 view.isDashboard 是真的(时，图像被渲染，而 else 不会呈现，因为它应该。如果我然后导航到应用程序的另一部分，isDashboard 将变为 false，并且 navigationIcon 和 navigationSelectMenu 将按原样呈现在 p 标签中。到目前为止，一切都很好。

当我直接从另一个路由进入我的应用程序并跳过仪表板时，问题就来了，例如，我转到/settings。 isDashboard 为假，而是呈现 2 个视图。但是 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"}}

一切正常

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

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

如果 p 元素

后面紧跟地址、文章、旁白、块引用、目录、div、dl、字段集、页脚、表单、h1、h2、h3、h4、h5、h6、页眉、hr、菜单、导航、ol、p、pre、部分、表或 ul 元素，或者父元素中没有更多内容并且父元素不是 a 元素，则可以省略 p 元素的结束标记。

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

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

希望对您有所帮助。

相关文章：