Javascript 在Meteor Template.events中绑定语义UI模块事件

我不想使用jQuery，而是想通过“Meteor方式”将回调绑定到语义UI模块，有点像Bootstrap 3所允许的，例如：

Template.someTemplate.events({
'show.bs.dropdown.someDropdown'：函数（）{
//下拉模块显示事件的正式引导JS回调
}
});

在语义UI中，我似乎只能在包含模板的

onRendered（）

回调中使用jQuery绑定时定义回调函数，例如：

Template.someTemplate.onRendered（函数（）{
此.$（'someDropdown'）。下拉列表({
“onShow”：函数（）{
//下拉模块显示事件的官方语义UI JS回调
}
});
});

这不是最优的，因为（a）在特定模板的

onRendered（）

回调过程中，其他DOM元素可能还没有准备好进行操作，并且（b）这使得关注点和代码清晰性的分离更难实现

有没有办法使用Meteor的

模板.events

绑定这些事件，如果有，正确的语法是什么

谢谢。

请参阅

如解决方案中所述，绑定UI的最佳方法是使用

manuel:viewmodel

将UI的状态保留在javascript对象中，并将UI元素绑定到该对象的属性

可以找到文档

请参阅

如解决方案中所述，绑定UI的最佳方法是使用

manuel:viewmodel

将UI的状态保留在javascript对象中，并将UI元素绑定到该对象的属性

可以在“我的解决方案”中找到文档

html

我的解决方案

html

---

谢谢你的回复。这是一个好看的包裹。然而，将自定义变量和函数绑定到模板DOM并不是我想要的。我只是在寻找Meteor事件驱动的语法来绑定本机语义UI模块事件。我希望避免添加额外的软件包，这会带来更多的复杂性。DOM所需的任何反应性变量和帮助程序都已经是模板的一部分，这使得

viewmodel

包不完全符合我刚才的目的。感谢您的回复。这是一个好看的包裹。然而，将自定义变量和函数绑定到模板DOM并不是我想要的。我只是在寻找Meteor事件驱动的语法来绑定本机语义UI模块事件。我希望避免添加额外的软件包，这会带来更多的复杂性。DOM所需的任何被动变量和帮助器都已经是模板的一部分，这使得

viewmodel

包不完全符合我刚才的目的。

<div class="ui search selection dropdown" id="dataDropdown">
  <input type="hidden" name="applications">
  <i class="dropdown icon"></i>
  <div class="default text">Application</div>
  <div class="menu" >
    {{#each data}}
      <div class="item" data-value={{id}}>
        {{name}}
      </div>
    {{/each}}
  </div>
</div>

//can catch 2 events when searching then clicking on a dropdown item. 
//first event is the change of the input text. second event is the dropdown
//change. we only want the values associated with the dropdown change, thus
//we use the if check
change #appDropdown': function(event, template) {
  if (event.target.type === 'text'){
    return;
  }
  console.log(event.target.value);
}