未检测到 Emberjs 下拉选择的选项更改

Question

我有一个应用程序需要创建保存为细分的过滤器。过滤器具有根据下拉列表中的模型 select 显示的子字段。在我单击 添加更多 + 按钮 和 select 下拉列表中的不同模型之前，这工作正常，因此如果例如在第一个下拉列表中我 select ed attributes model 然后点击 add-more 按钮现在 select event model从下拉列表中，事件模型的依赖字段不会显示，而是会继续显示 属性模型 的字段。

单击此 jsbin 查看问题的发生，因为您单击 + 按钮 并在下拉列表中更改模型。你会看到依赖字段没有改变。

这是用于向 select 模型显示下拉列表的组件：

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();
     }
    }
 },  

});

如果用户模型是从下拉列表select编辑的，那么这是显示相关字段的模板：

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

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

});

这是用于向 select 模型显示下拉列表的 emberjs 部分

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

这显示过滤器 select 模型以及显示嵌套组件以显示相关字段

<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>

相关字段的组件

  <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>

任何建议都会有所帮助。

Answer 1

那是因为您正在复制的元素没有任何绑定。我认为这种方法根本行不通（只是使用 Ember 作为 Jquery 包装器复制 dom 元素）。让我们重新考虑这里的方法，使其更符合 Ember 想要的东西。

可能您想要的是设置一个属性为 'filters' 的学生控制器，然后有一个按钮可以创建一个新的（空白）过滤器并将其添加到您的'filters' 属性每次单击 + 按钮。然后你所需要的只是一个 each 循环来遍历每个 'filters' 并渲染你的组件。

未检测到 Emberjs 下拉选择的选项更改

Emberjs dropdown selected option change not detected

jquery

handlebars.js

ember.js