在 Meteor Template.events 中绑定 Semantic-UI 模块事件

Question

我不想使用 jQuery，而是想将回调绑定到 Semantic-UI 模块的“Meteor-way”，有点像 Bootstrap 3 允许的，例如：

Template.someTemplate.events({
  'show.bs.dropdown .someDropdown': function () {
    // official Bootstrap JS callback for the Dropdown module's show event
  }
});

使用 Semantic-UI 似乎我只能在包含模板的 onRendered() 回调中使用 jQuery 绑定时定义回调函数，例如：

Template.someTemplate.onRendered( function () {
  this.$('.someDropdown').dropdown({
    'onShow': function () {
      // official Semantic-UI JS callback for the Dropdown module's show event
    }
  });
});

这不是最优的，因为 (a) 在特定模板的 onRendered() 回调期间其他 DOM 元素可能还没有准备好进行操作，并且 (b) 它使得关注点分离和代码清晰变得更加难以实现。

有没有办法使用 Meteor 的 Template.events 绑定这些事件，如果是，那么正确的语法是什么？

谢谢。

Answer 1

我的解决方案

html

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

js

//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);
}

Answer 2

请参考this Solution

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

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

文档可以在here找到