I'm currently on an Ember 2.4 project and I'm integrating a form divided in "steps", like this :
<form>
<div id="step_1">
<!-- blabla -->
</div>
<div id="step_2">
<!-- blabla -->
</div>
<div id="step_3">
<!-- blabla -->
</div>
</form>
I would like to display only one item in the same time.
I would like to manage it dynamically because this form can evolve in lots of steps...
The idea I had was to use a currentStep var in the controller, and a test that check if the parameter passed was the currentStep.
But in Ember and Handlebars, seems impossible to use methods giving arguments to make a test, something like that for example :
<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>
Or, at least, something like that :
<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>
The idea behind is to manage a function like :
isCurrentStep: function(id){
return this.get('currentStep') == id ? "visible" : "hidden";
}
Or even simply returning true / false and manage the class toggle in the HBS file.
Do you have a "not complicated" solution, or even a better idea to manage my problem, to do that ? I don't wanna create as much functions as there are steps, like :
isCurrentStep1: function(){
return this.get('currentStep' == 1;
}
isCurrentStep2: function(){
return this.get('currentStep') == 2;
}
isCurrentStep3: function(){
return this.get('currentStep') == 3;
}
Aucun commentaire:
Enregistrer un commentaire