Question

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

index.hbs （模板）

＆＃13;

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

＆＃13;

index.js （控制器）

＆＃13;

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

＆＃13;

我尝试创建单个操作，可以根据操作处理程序中传递的参数切换不同的框：

＆＃13;

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

＆＃13;

＆＃13; 我想做类似下面的事情，

＆＃13;

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

＆＃13;

＆＃13; 是否可以这样做，同时确保显示一个内容框导致所有其他内容框消失？

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)

Ember js使用{{#if}}帮助

1 个答案: