CODEWITHSUNDEEP
javascripthtmlember.js
rrooding
rrooding

Reputation: 13

ember.js html output broken

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

Upvotes: 1

Views: 316

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

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.

Upvotes: 2

Related Questions