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:
- 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.
- 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