jeudi 10 mars 2016

Finding the value of selected item of a dropdown: Is this the right way?

I'm trying to learn ember.js. I am using version 2.4.1. Given that controllers will soon be deprecated, I am trying to stay away from those and doing everything in routes and components.

So I have a route and on that route I have a dropdown. What I am interested in finding is selected value of that dropdown when it changes. For that I am using actions. This is how my template looks like:

                <select id="ddlIconSize" class="form-control input-lg" style="width: 100px;" {{action 'changeSize' on 'change' }}>
                    <option value="1">1X</option>
                    <option value="2">2X</option>
                    <option value="3" selected="selected">3X</option>
                    <option value="4">4X</option>
                    <option value="5">5X</option>
                </select>

I tried a number of things to get the selected value of the dropdown in the action. When I used this link: http://ift.tt/1PG5iIQ, I got an error message saying changeSize action is not defined. Other examples I looked at made use of Ember.Select helper which is deprecated.

Then I ran into the deprecation documentation on Ember.js website here http://ift.tt/1LTnHoF, and based on the example there I ended up implementing the action like below:

  actions: {
    changeSize: function() {
      let newSize = parseInt(jQuery('#ddlIconSize').val(), 10);
      //do something with the new size....
    }
  }

This works!

However I have two questions:

  1. Is this the right way to do this? Is there another way of doing it? I tried almost all the examples I could find on the Internet but unfortunately none of them worked.
  2. I have to make use of jQuery to get the element in my route. This creates a direct dependency between my template and the code behind (.js file). This doesn't look right to me. There should be a way to bind the values of the UI components to something in my js file. Given that I am quite new to this thing so I may be wrong in my understanding. I would appreciate if someone can explain why I am wrong.

Aucun commentaire:

Enregistrer un commentaire