Ember js使用{{#if}} helper来切换显示的动态动作

Question

我正在使用一些非常简单的操作来切换Ember中的内容框:(这里的工作示例:http://emberjs.jsbin.com/heyena/edit?html,css,js,output)。

索引。哈佛商学院

(模板)

<span {{action 'toggleBoxOne'}}>Toggle Box One</span>
<span {{action 'toggleBoxTwo'}}>Toggle Box Two</span>
{{#if One}}
<h3>Box 1</h3>
{{/if}}
<div class="clr"></div>
{{#if Two}}
<h3>Box 2</h3>
{{/if}}

index.js

(控制器)

actions: {
  toggleBoxOne: function() {
    this.set('Two', false);
    var showBox = this.get('One');
    if (showBox === false) {
      this.set('One', true);
    } else {
      this.set('One', false);
    }
  },
  toggleBoxTwo: function() {
    this.set('One', false);
    var showBoxTwo = this.get('showBoxTwo');
    if (showBoxTwo === false) {
      this.set('showBoxTwo', true);
    } else {
      this.set('showBoxTwo', false);
    }
  },
}, One: false, Two: false

我试图创建一个单一的动作，它可以切换不同的框基于传入的参数在动作处理程序:

<span {{action 'toggleBox' 'One'}}>Toggle Box One</span>
<span {{action 'toggleBox' 'Two'}}>Toggle Box Two</span>

我想做如下的事情，

toggleBox: function(boxName) {
  var thisBox = boxName;
  if (thisBox === true) {
    this.set(thisBox, false);
  } else {
    this.set(thisBox, true);
  }
}, thisBox: false,

有可能做到这一点，同时确保显示一个内容框导致所有其他内容框消失?

Answer 1

你可以做一些非常接近你想要的东西:

toggleBox: function(boxName) {
  var thisBox = this.get(boxName);
    if (thisBox === true) {
      this.set(boxName, false);
    } else {
      this.set(boxName, true);
  }
}

但是直接写

要简单得多

this.set(boxName, !this.get(boxName))

可以写成

更紧凑(更有效)

this.toggleProperty(boxName)