查找下拉列表中所选项目的值：这是正确的方法吗？

Question

我正在努力学习ember.js。我使用的是版本2.4.1。鉴于控制器很快就会被弃用，我试图远离这些控制器并在路由和组件中做所有事情。

所以我有一条路线，在那条路线上我有一个下拉列表。我感兴趣的是当它发生变化时选择该下拉列表的值。为此我使用actions。这就是我的模板的样子：

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

我尝试了很多方法来获取操作中下拉列表的选定值。当我使用此链接：http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html时，收到一条错误消息changeSize action is not defined。我查看的其他示例使用了Ember.Select helper，不推荐使用。

然后我在Ember.js网站http://emberjs.com/deprecations/v1.x/#toc_ember-select上遇到了弃用文档，基于这个例子，我最终实现了如下所示的操作：

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

这有效！

但是我有两个问题：

1. 这是正确的方法吗？还有另一种方法吗？我尝试了几乎所有可以在互联网上找到的例子，但遗憾的是他们都没有工作。
2. 我必须使用jQuery来获取我的路线中的元素。这会在我的模板和后面的代码（.js文件）之间创建直接依赖关系。这对我来说不合适。应该有一种方法将UI组件的值绑定到我的js文件中的某些内容。鉴于我对这件事情很陌生，所以我的理解可能是错的。如果有人能解释我错的原因，我将不胜感激。