Note that there are some explanatory texts on larger screens.

plurals
  1. POItemView events not Triggering
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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