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 <div class="navbar-text pull-right header-user-info></div> it works fine. — rrooding
– rrooding, Commented Sep 30, 2013 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 stackoverflow.com/questions/4291467/… — Marcio Junior
– Marcio Junior, Commented Sep 30, 2013 at 13:53

intuitivepixel · Accepted Answer · 2013-09-30 13:50:23Z

2

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.

edited Sep 30, 2013 at 13:50

answered Sep 30, 2013 at 13:44

intuitivepixel

23.3k3 gold badges59 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kentor Over a year ago

This is not worded correctly. <p> tags with nested script tags seem to work fine. However, on the first encounter of one of the elements bolded in the quotes, the <p> tag will automatically close. In rrooding's case that element is the <ul> element. Finally, we have a hanging </p> tag which the browser fixes by replacing that with <p></p>.

Collectives™ on Stack Overflow

ember.js html output broken

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related