javascript - Ember js - 切换传递给操作的当前值和先前值

Question

我有以下简单的模式，可以在单击三个按钮时切换三个不同 div 的可见性:

templates/index.hbs

<button {{action 'toggleBox' 'boxOne'}}>One</button>
<button {{action 'toggleBox' 'boxTwo'}}>Two</button>
<button {{action 'toggleBox' 'boxThree'}}>Three</button>
{{#if boxOne}}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
{{/if}} 
{{#if boxTwo}}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
{{/if}} 
{{#if boxThree}}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
{{/if}}

controllers/index.js

toggleBox: function(boxName) {
  this.toggleProperty(boxName);
},

问题是我一次只需要显示 1 个框 - 如果 boxOne 可见，则单击 boxTwo 应该显示 boxTwo并隐藏 boxOne。

我尝试在值切换后将属性名称保存在变量中，以便在打开不同的框时将其设置为 false，但我无法获得正确的模式。

toggleBox: function(boxName) {
  /***Here I would like to set the previous value of boxName to false***/
  this.toggleProperty(boxName);
  //put the current value of boxName in a variable to use in the next run of the action.
  this.set('currentBox', boxName);
  var current = this.get('currentBox');
},

Answer 1

也许这种处理 currentBox 属性的方式不太黑客​​化。

currentBox: '',

toggleBox: function(boxName) {
  this.set('currentBox', boxName);
},
boxOneIsActive: function() {
  return this.get('currentBox') === 'boxOne');
}.property('currentBox')
/* ... */