Question

我目前正处于Ember 2.4项目中，我正在整合一个分为“步骤”的表格，如下所示：

<form>
  <div id="step_1">
    <!-- blabla -->
  </div>
  <div id="step_2">
    <!-- blabla -->
  </div>
  <div id="step_3">
    <!-- blabla -->
  </div>
</form>

我想在同一时间只显示一个项目。

我想动态管理它，因为这种形式可以在很多步骤中发展......

我的想法是在控制器中使用currentStep var，并检查传递的参数是否为currentStep。

但是在Ember和Handlebars中，似乎不可能使用提供参数的方法来进行测试，例如：

  <div id="step_1" class={{isCurrentStep(1)}}>
    <!-- blabla -->
  </div>
  <div id="step_2"  class={{isCurrentStep(2)}}>
    <!-- blabla -->
  </div>
  <div id="step_3"  class={{isCurrentStep(3)}}>
    <!-- blabla -->
  </div>

或者，至少，类似的东西：

  <div id="step_1" class={{isCurrentStep(1):visible:invisible}}>
    <!-- blabla -->
  </div>
  <div id="step_2"  class={{isCurrentStep(2):visible:invisible}}>
    <!-- blabla -->
  </div>
  <div id="step_3"  class={{isCurrentStep(3):visible:invisible}}>
    <!-- blabla -->
  </div>

背后的想法是管理像：

这样的功能

isCurrentStep: function(id){
  return this.get('currentStep') == id ? "visible" : "hidden";
}

甚至只需返回true / false并管理HBS文件中的类切换。

你有一个“不复杂”的解决方案，甚至更好的想法来管理我的问题吗？我不想创建与步骤一样多的功能，例如：

isCurrentStep1: function(){
  return this.get('currentStep') == 1;
}
isCurrentStep2: function(){
  return this.get('currentStep') == 2;
}
isCurrentStep3: function(){
  return this.get('currentStep') == 3;
}

Answer 1

我建议为每个步骤编写一个组件，并使用final帮助程序显示当前组件。或者甚至可以使用你的路由器。

但你想要的也很容易。您需要{{component}} / currStep上的controller媒体资源和简单的component帮助商：

is-equal

然后您可以在模板中执行此操作：

//helpers/is-equal
import Ember from 'ember';

export function boolOr([left, right]/*, hash*/) {
  return return left == right;
}

export default Ember.Helper.helper(boolOr);

Ember 2：带参数的动态CSS类

1 个答案: