Ember js動態操作以使用{{#if}}助手來切換顯示

Question

我正在使用一些非常簡單的操作來切換Ember中的內容框：（此處的工作示例： http ://emberjs.jsbin.com/heyena/edit?html,css,js,output）。

index.hbs （模板）

 <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)