语义 Ui 下拉功能抛出模板功能答案

【问题标题】：SemanticUi Dropdown Function Throws off template function语义 Ui 下拉功能抛出模板功能
【发布时间】：2015-12-20 11:05:16
【问题描述】：

语义 UI Dropdown function 抛出我的模板事件函数。

Meteor 1.2 中的设置：

主页模板：

<select id="foo" class="ui dropdown">
  <option value="">Gender</option>
  <option value="1">Male</option>
  <option value="0">Female</option>
</select>
<script>$('.ui.dropdown').dropdown();</script>

模板事件：

'change #foo': function(e){
  var selected = $(e.target).val();
  console.log(selected);
}

如果我在主页模板中注释掉脚本，我会收到我的日志消息，但如果没有注释则不会。有什么破解方法吗？

【问题讨论】：

尝试将下拉 init $('.ui.dropdown').dropdown(); 添加到 Template.onRendered 并收听更改事件，您可能需要检查 SemanticUI 他们可能有不同的方式来收听更改，您也可以这样做在 onRendered 函数内部
对不起，马克。我有点新。我创建了Template.name.onRendered({});，将脚本移到里面但还是什么都没有？
添加了一个答案以帮助您举例
谢谢。我正在使用移动设备，我会在一两个小时内试用。

标签： javascript jquery meteor semantic-ui

【解决方案1】：

当你想初始化外部插件（semantic-ui 下拉菜单）时，你应该在 onRendered 中初始化它，这里是我使用 onChange 回调的下拉插件的选项

http://semantic-ui.com/modules/dropdown.html#/settings

类似这样的：

Template.name.onRendered(function () {
  $('.ui.dropdown').dropdown({
    onChange: function (val, text) {
        console.log(val);
    }
  });
});

【讨论】：

轻而易举！谢谢！