Question

我一般也在寻找关于Ember最佳实践的一些建议，因为我还没有弄清楚我将如何处理一般的互动。这里讨论的交互是一个小菜单，当您点击下拉链接时，该菜单会切换。

我为此下拉链接创建了以下组件。

export default Ember.Component.extend({
  classNames: ['dib'],
  isClicked: false,
  actions: {
    showMenu: function(){
      this.toggleProperty('isClicked');
    }
  } 
});

当然，在.hbs文件中，我有以下内容：

{{#if isClicked}}
    // Code goes here
{{/if}}

最终结果如下：

由于这种方法，我有以下问题

我不完全确定如何通过点击它来隐藏盒子
曾经透露过的方框在路线上是持久的
是否可以使用此方法附加动画（如淡入淡出）？（我想象不到）
这是在EmberJS中接近这样的事情的正确方法吗？

Answer 1

一些想法：

我不完全确定如何通过点击它来隐藏盒子

handleOutsideClick: function(event) {
   //hide element;
},
setupOutsideClickListener: Ember.on('didInsertElement', function() {
   let clickHandler = this.get('handleOutsideClick').bind(this);

   return Ember.$(document).on('click', clickHandler);
})

曾经揭示的那个盒子在路线上是持久的

我猜您的意思是当您单击框中的某个链接时，该框在路由到下一页时仍然可见。这是正常的行为。只需在链接中添加操作并在路由或路由之前关闭元素。

是否可以使用此方法附加动画（如淡入淡出）？（我想不到）

如果您只想要简单的动画，可以使用jquery。

toggleAnimation: function(isOpen, section) {
 if (isOpen) {
   section.slideUp(400);
 } else {
   section.animate({
     height: 'toggle'
   }, 400, function() {
     section.slideDown(400);
   });
 }
},

部分在这里是一个dom元素。

Is this even the correct way to approach something like this in EmberJS?

是。总有其他一种方法，但你可以用ember制作出你想要的东西。

Answer 2

我不完全确定如何通过点击它来隐藏盒子

这实际上有点棘手。您可以在disInsertElement中为此手动附加事件侦听器，或者使用带有操作处理程序的大型不可见div覆盖。虽然我没有对此进行测试，但也有plugins。

曾经揭示的那个盒子在路线上是持久的

为什么不应该？如果你过渡了所以组件不再可见，那么盒子也不会。但是，如果您只是在嵌套插座内转换，则保持状态。

是否可以使用此方法附加动画（如淡入淡出）？（我想不到）

结帐liquid-fire。

这甚至是在EmberJS中接近这样的事情的正确方法吗？

复杂的问题。你可能只能在CSS中做到这一点。它绝对不是错误的，所以请继续使用它。

问题是在哪里保存这个状态。该组件具有有限的生命周期，但如果该生命周期符合您的要求则很好。

它也很容易集成其他插件和Bootstrap DropDowns之类的东西，它总是取决于你的偏好。

如何在EmberJS中显示/隐藏div？

2 个答案: