ember.js html output broken

Question

I'm having a lot of troubles trying to debug why the following is failing:

Given the following template:

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

and the PR2.NavigationSelectMenuView as follows:

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

When I go to the dashboard (and view.isDashboard is true), the image is rendered, and the else is not rendered, as it should. If i then navigate to another part of the application, the isDashboard becomes false and the navigationIcon and navigationSelectMenu are rendered within the p-tag as it should. So far everything is fine.

The problem comes when I enter my application directly from another route, and skip the dashboard, for example, i go to /settings. isDashboard is false and the 2 views are rendered instead. But the html output is broken then:

HTML output when navigating through the dashboard (the good output), all the metamorph tags are nested properly:

<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 output when navigating directly to another page (the bad output), the metamorphs start in the p-tag, but then the p is closed, then the content, and then another 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>

The strange thing is, if I leave out this line:

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

Everything works fine

After some debugging by removing code, I found out that this only happens when the root tag is a paragraph, if I change it to — rrooding, Sep 30 '13 at 13:34
In html you can't put a block element, inside of an inline element. You will have some layout issues. Give a look in @intuitivepixel answer and this relative question http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong — Marcio Junior, Sep 30 '13 at 13:53

intuitivepixel · Accepted Answer · 2013-09-30T13:50:23.367

The problem is clearly because the p (paragraph) tag does not support nested script tags inside.

Taken from: 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.

This is also the reason why when you use div everything works fine. IMHO this is not an ember issue, but rather related to the limitations the p tag has.

Therefore the way to go would be to wrap stuff in a div and format it the way you would do with the paragraph.

Hope it helps.

This is not worded correctly.
tags with nested script tags seem to work fine. However, on the first encounter of one of the elements bolded in the quotes, the
tag will automatically close. In rrooding's case that element is the
element. Finally, we have a hanging tag which the browser fixes by replacing that with
. — kentor, Oct 30 '13 at 04:20

ember.js html output broken

1 Answers1