Databases
StackOverflow2013
Postsdbo
POItemView events not Triggering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POItemView events not Triggering
    text
    copied!<h1><strong>What i want to do:</strong></h1> <p>Render a select dropdown with option tags inside, and when user selects an option in the dropdown, get the newly selected model and do stuff with it.</p> <h1><strong>Problem:</strong></h1> <p>I'm having a hard time to get the change event to be triggered in an ItemView that's been called through a CompositeView.</p> <p>For some reason the CompositeView:change (log: holy moses) is being triggered, however it doesn't help me much, since it won't give me the selected model.</p> <p>I've tried a ton of stuff but nothing really worked. </p> <p>any help would be greatly appreciated!</p> <h2><strong>code:</strong></h2> <pre><code>Configurator.module('Views.Ringsizes', function(Views, Configurator, Backbone, Marionette, $, _) { Views.DropdownItem = Marionette.ItemView.extend({ tagName: 'option', template: "#dropdown-item", modelEvents: { 'change': 'modelChanged' }, onRender: function(){ console.log('tnt'); this.$el = this.$el.children(); this.setElement(this.$el); }, modelChanged: function(model) { console.log("holy mary"); } }); Views.DropdownView = Marionette.CompositeView.extend({ template: "#dropdown-collection", className: 'configurator-ringsizes-chooser', itemView: Views.DropdownItem, itemViewContainer: '.product_detail_ring_sizes', events: { "change": "modelChanged" }, initialEvents: function(){}, initialize: function(){ console.log(this.model); this.collection = new Backbone.Collection(this.model.getRingsizes()); }, modelChanged: function(model) { console.log("holy moses"); } }); Views.List = Marionette.CollectionView.extend({ className: 'configurator-ringsizes', itemView: Views.DropdownView }); }); </code></pre> <h2><strong>template code: (if needed)</strong></h2> <pre><code>&lt;script type="text/template" id="dropdown-item"&gt; &lt;option value="&lt;@- code @&gt;" &lt;@ if(current) { @&gt; selected="selected" &lt;@}@&gt; &gt;&lt;@- name @&gt; &lt;/option&gt; &lt;/script&gt; &lt;script type="text/template" id="dropdown-collection"&gt; &lt;div class="accordionContent accordionContent_ringsizes"&gt; &lt;div class="configurator-ringsizes-chooser-ringsizes-region"&gt; &lt;select class="product_detail_ring_sizes"&gt;&lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/script&gt; </code></pre>
 

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