mercredi 16 mars 2016

Ember 2 : dynamic CSS class with parameters

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