CODEWITHSUNDEEP
jqueryember.jshandlebars.js
brg
brg

Reputation: 3953

Emberjs dropdown selected option change not detected

I have an app that needs to create filters which are saved as segment. The filters have sub fields that are displayed dependent on the model selected from the dropdown list. This works fine until I click the add-more + button and select a different model from the dropdown, so that if for example in the first dropdown I selected attributes model and then click the add-more button and now select event model from the dropdown, the dependent fields for the event model are not displayed instead it will continue to display the fields of the attributes model.

Click on this jsbin to see the problem occur as you click the + button and change the model in the dropdown. You will see that the dependent fields did not change.

This is the component for display the dropdown to select a model:

App.SegmentDisplayComponent = Ember.Component.extend({
  selectedSegment: null,

  segments: ['attributes', 'events', 'page_view'],

  isSegmentAttribute: function(){
    var a = this.get('selectedSegment');
    var b = (a  == 'attributes');
    return b;
  }.property('segments.@each','segments.length', 'selectedSegment'),

  isSegmentEvent: function(){
   var a = this.get('selectedSegment');
   var b = (a  == 'events');
   return b;
  }.property('segments.@each','segments.length', 'selectedSegment'),

  actions: {
    save: function(model){
     this.sendAction('action', model);
    },

    addMore: function(){
     var jj = Ember.$('.segment');
     var kk = Ember.$('.segment-data');
     return kk.last().clone(true).appendTo(jj);
    },

    removeField: function(){
     var bb = Ember.$('.segment-data');
     if (bb.length > 1) {
       return bb.last().remove();
     }
    }
 },  

});

This is the template to display dependent fields if the user model is selected from the dropdown:

App.AttributeDisplayComponent = Ember.Component.extend({
  lookupType: ["greather_than", "less_than", "equals"],

  attributes: ['created_at', 'customer', 'active', 'paid']

});

This the emberjs partial for displaying the dropdown to select models

<script type="text/x-handlebars" id="_segmentSelection">
{{view 'select' content=segments
   value=selectedSegment
   selection=selectedSegment
}}
</script>

This display the filters to select the models as well as display nested components to display dependent fields

<script type="text/x-handlebars" id="components/segment-display">

  Filter users by:

  <form>
  <div class="segment">
    <div class="segment-data">
      <button {{action 'removeField'}}> - </button>
       {{partial 'segmentSelection'}} 

       {{attribute-display   isSegmentAttribute=isSegmentAttribute  action="save"}}

       {{event-display isSegmentEvent=isSegmentEvent}}
     <br>
     </div>
   </div>
   <button type="submit"> Save </button>
    <br>

    <button {{action 'addMore'}}> + </button>

   </form>

  </script>

The components for dependent fields

  <script type="text/x-handlebars" id="components/attribute-display"> 
    {{#if isSegmentAttribute}}
     <p> Users who have: </p>
     {{view 'select' content=attributes value=fieldAttr selection=fieldAtrr}}
     {{view 'select' content=lookupType  value=operatorPicked  selection=operatorPicked}}
     {{input placeholder="user attr"}}
    {{/if}}
  </script>

  <script type="text/x-handlebars" id="components/event-display">
    <p> Events with: </p>
    {{#if isSegmentEvent}}
      <p> Events that have: </p>
     {{input  placeholder="event"}}
    {{/if}} 
  </script>

Any suggestions will be helpful.

Upvotes: 1

Views: 547

Answers (1)

Kori John Roys
Kori John Roys

Reputation: 2661

That's because there is nothing bound to the elements you are copying. I don't think this approach will work at all (just copying dom elements using Ember as a Jquery wrapper). Let's rethink the approach here to be more in line with how Ember wants things.

Likely what you want is to set up a students controller with a property of 'filters', then have a button that creates a new (blank) filter and adds it to the end of your 'filters' property each time the + button is clicked. Then all you need is an each loop to loop over each of the 'filters' and render your component.

Upvotes: 1

Related Questions