Databases
StackOverflow2013
Postsdbo
POTrying to render dynamic dropdowns using Bootstrap and Marionette, sibling tag
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to render dynamic dropdowns using Bootstrap and Marionette, sibling tag
    text
    copied!<pre><code>&lt;div class="dropdown"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Dropdown trigger&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; &lt;li role="presentation"&gt; &lt;a role="menuitem" tabindex="-1" href="#"&gt;{{model.name}}&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This is the basic code that bootstrap needs for a dropdown</p> <pre><code>&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Dropdown trigger&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;&lt;/ul&gt; </code></pre> <p>That is the code I need to be rendered as a item for a menu (File, Edit, etc...) the problem are the sibling tags that hold the menu list items</p> <p>I would use something like this:</p> <pre><code>&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;{{name}}&lt;/a&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;&lt;/ul&gt; </code></pre> <p>Then I want to render menu list items into the 'ul.dropdown-menu' element:</p> <pre><code>&lt;li role="presentation"&gt; &lt;a role="menuitem" tabindex="-1" href="#"&gt;{{name}}&lt;/a&gt; &lt;/li&gt; </code></pre> <p>Here is my Marionette view:</p> <pre><code>var menuItem = Marionette.ItemView.extend({ tagName: 'a', attributes: { 'class': 'dropdown-toggle', 'data-toggle': 'dropdown', 'href': '#' }, initialize: function() { this.render(); }, render: function() { this.$el.html('test').after('&lt;b&gt;bam?&lt;/b&gt;'); return this; } }); </code></pre> <p>Anytime I call the render function and try to manipulate the data outside of the this.el that is set up on creation it is never appended after the tag. Only inside (so I see 'test' inside the a tags but not the 'bam?'. Anyone have any tips for dealing with sibling elements?</p> <p>I also am not as experienced with Backbone / Marionette so there may be better way to attack this, I am just not sure.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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