在嵌套视图中使用活动类的链接助手答案

【问题标题】：Link-to helper using active class inside nested view在嵌套视图中使用活动类的链接助手
【发布时间】：2014-06-02 21:03:44
【问题描述】：

我有一个触发下拉菜单的视图。该视图内部是另一个视图，即下拉列表本身。我正在使用“活动”类绑定和 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);
    }
  })
});

header-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。我无法通过单击链接弄清楚如何做到这一点。有什么想法吗？

【问题讨论】：

ember.jsbin 总是很好！
另外，不是每个 Ember 开发人员都知道咖啡脚本，目标是更大的受众；）
感谢@givanse 我已将其更新为 JS。我会尝试创建一个 ember.jsbin。

标签： ember.js handlebars.js

【解决方案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 :hover 显示/隐藏组件，而不是在 mouseEnter 和 mouseLeave 上定义处理程序。

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

【讨论】：