Databases
StackOverflow2013
Postsdbo
POember.js html output broken
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POember.js html output broken
    primarykey
    data
    text
    <p>I'm having a lot of troubles trying to debug why the following is failing:</p> <p>Given the following template:</p> <pre><code>&lt;p class='navbar-text pull-right header-user-info'&gt; {{#if currentUser.isSignedIn}} {{#if view.isDashboard}} &lt;img {{bindAttr src="currentUser.avatar" title="currentUser.fullName"}} class='avatar'&gt; {{else}} {{view PR2.NavigationSelectMenuView selectedBinding="view.selected"}} {{navigationIcon selectedBinding="view.selected"}} {{/if}} &lt;span class='user-info'&gt; aangemeld als {{currentUser.fullName}} {{#link-to 'session.destroy'}}log uit{{/link-to}} &lt;/span&gt; {{/if}} &lt;/p&gt; </code></pre> <p>and the PR2.NavigationSelectMenuView as follows:</p> <pre><code>PR2.NavigationSelectMenuView = Em.View.extend({ tagName: 'ul' }); </code></pre> <p>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.</p> <p>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:</p> <p>HTML output when navigating through the dashboard (the good output), all the metamorph tags are nested properly:</p> <pre><code>&lt;p class="navbar-text pull-right header-user-info"&gt; &lt;script id="metamorph-0-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;script id="metamorph-1-start" type="text/x-placeholder"&gt;&lt;/script&gt;&lt;script id="metamorph-1-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;ul id="ember511" class="ember-view"&gt;&lt;/ul&gt; &lt;span id="ember514" class="ember-view avatar settings-icon"&gt;&lt;/span&gt; &lt;script id="metamorph-1-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;span class="user-info"&gt; &lt;span id="i18n-0"&gt;aangemeld als&lt;/span&gt; &lt;script id="metamorph-2-start" type="text/x-placeholder"&gt;&lt;/script&gt;username&lt;script id="metamorph-2-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;a id="ember424" class="ember-view loading" href="#"&gt;&lt;span id="i18n-1"&gt;log uit&lt;/span&gt;&lt;/a&gt; &lt;/span&gt; &lt;script id="metamorph-0-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;/p&gt; </code></pre> <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> <pre><code>&lt;p class="navbar-text pull-right header-user-info"&gt; &lt;script id="metamorph-0-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;script id="metamorph-1-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;/p&gt; &lt;ul id="ember444" class="ember-view"&gt;&lt;/ul&gt; &lt;span id="ember447" class="ember-view avatar settings-icon"&gt;&lt;/span&gt; &lt;script id="metamorph-1-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;span class="user-info"&gt; &lt;span id="i18n-0"&gt;aangemeld als&lt;/span&gt; &lt;script id="metamorph-2-start" type="text/x-placeholder"&gt;&lt;/script&gt;username&lt;script id="metamorph-2-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;a id="ember448" class="ember-view loading" href="#"&gt;&lt;span id="i18n-1"&gt;log uit&lt;/span&gt;&lt;/a&gt; &lt;/span&gt; &lt;script id="metamorph-0-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;p&gt;&lt;/p&gt; </code></pre> <p>The strange thing is, if I leave out this line:</p> <pre><code>{{view PR2.NavigationSelectMenuView selectedBinding="view.selected"}} </code></pre> <p>Everything works fine</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USrrooding
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POember.js html output broken
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAfter 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.
      singulars
      1. POember.js html output broken
      1. USrrooding
    2. COIn 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
      singulars
      1. POember.js html output broken
      1. USMarcio Junior
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload