Question

我有一个应用程序，需要创建保存为段的过滤器。过滤器具有显示的子字段，具体取决于从下拉列表中选择的模型。这点工作正常，直到我点击添加更多+按钮并从下拉列表中选择一个不同的模型，这样如果在第一个下拉列表中我选择属性模型然后点击添加更多按钮，然后从下拉列表中选择事件模型，不会显示事件模型的相关字段，而是会继续显示<的字段strong>属性模型。

点击此jsbin，点击 +按钮，然后在下拉菜单中更改模型，即可发现问题。您将看到依赖字段没有更改。

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

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

});

如果从下拉列表中选择了用户模型，则这是显示相关字段的模板：

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

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

});

这个emberjs部分用于显示选择模型的下拉列表

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

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

<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想要的东西。

你可能想要的是设置一个具有“过滤器”属性的学生控制器，然后有一个按钮创建一个新的（空白）过滤器，并在每次+时将其添加到“过滤器”属性的末尾单击按钮。然后你需要的是每个循环遍历每个'过滤器'并渲染你的组件。

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

1 个答案: