Question

我有一个触发下拉列表的视图。在该视图内部是另一个视图，下拉列表本身。我正在使用“主动”类绑定和CSS来显示和隐藏下拉列表。代码：

DropdownLinkView.js：

var DropdownLinkView = Ember.View.extend({
  classNames: ['dropdown-trigger'],
  classNameBindings: ['active'],
  active: false,
  mouseEnter: function(evt) {
    this.set('active', true);
  },
  mouseLeave: function(evt) {
    this.set('active', false);
  },
  dropdownView: Ember.View.extend({
    mouseLeave: function(evt) {
      var dropdown;
      dropdown = $(evt.target).parents('.nav-dropdown').data('dropdown-target');
      if ($(evt.toElement).hasClass(dropdown)) {
        return;
      }
      this.set('active', false);
    }
  })
});

标题-navigation.hbs：

{{#view DropdownLinkView}}
  <div class="nav-link">
    <span>Hover Over Me!</span>
    {{#view view.dropdownView}}
      <div class="nav-dropdown">
        {{#each item in items}}
          {{#link-to "item" item class="nav-dropdown-item"}}
            <span class="nav-dropdown-item-name">
              {{item.name}}
            </span>
          {{/link-to}}
        {{/each}}
      </div>
    {{/view}}
  </div>
{{/view}}

当我点击view.DropdownView内的链接时，我想关闭下拉菜单，因此我的直觉是在DropdownLinkView中将active设置为false。我点击链接时无法弄清楚如何做到这一点。有什么想法吗？

Answer 1

您可以定义组件视图并定义组件处理程序以关闭/隐藏组件：

App.DropdownLinkComponent = Em.Component.extend({
  classNameBindings: ['isHidden'],
  isHidden: false,

  actions: {

    close: function() {

      console.log('close component with CSS classNameBindings');
      this.set('isHidden', true);

    }

  }


});

然后，您可以在组件内触发操作：

  <script type="text/x-handlebars" data-template-name="components/dropdown-link">
    <div {{action 'close' on='mouseLeave'}}>
    child content
    </div>
  </script>

注意：您可以使用CSS显示/隐藏组件：悬停而不是在mouseEnter和mouseLeave上定义处理程序。

http://emberjs.jsbin.com/zodon/1/edit

使用嵌套视图中的活动类链接到辅助对象

1 个答案: