在ember中定位兄弟元素的正确方法是什么？

Question

我目前的方法有效，但它依赖于jQuery，而不是直接定位元素。这感觉不太理想。在ember中有没有一种标准的方法呢？

App.facetGroup = Em.View.extend({
  templateName: "facet-group",
  actions: {
    showList: function(e) {
      var id = '#' + this.get('elementId');
      $(id).children('.facets-list').slideToggle(100)
    }
  } 
});

facet-group模板：

<h3 {{action showList target="view"}} class="facet-group-heading">{{view.displayName}}</h3>

// Facet lists are hidden by default 
<ul class="facets-list">
  {{#each view.facets }}
    {{view this}}
  {{/each}}
</ul>

Answer 1

通过创建一个包含两个子视图的ContainerView，你不是更好吗：[h3 ..]和[ul ..]？你也可以使用：this。$（）代替this.get（'elementId'）

来定位视图的jquery元素。

修改

这样的事情应该有效：

App.FacetGroupView = Ember.ContainerView.create({
  childViews: ['header', 'list'],
  header: Ember.View.create(
    tagName: 'h3',
    // templateName: 'facet-group/header' or
    template: Ember.Handlebars.compile('
      {{view.displayName}}
    '),
    classNames: ['facet-group-heading'],
    click: function() {
      // Access the list view element
      this.list.$().slideToggle(100);
    }
  )
  list: Ember.View.create(
    tagName: 'ul',
    classNames: ['facets-list'],
    // templateName: 'facet-group/list' or
    template: Ember.Handlebars.compile('
      {{#each view.facets}}
        {{view this}}
      {{/each}}
    '),
     didInsertElement: function() {
       // Hide facet list by default
       this.$().hide();
     }
  )
});

Answer 2

你也可以像

一样瞄准sibbling

actions: {
  showList: function() {
     this.$('.facets-list').slideToggle(100)
  }
}

演示Fiddle