绑定语义-流星模板中的ui模块事件

Binding Semantic-UI module events in Meteor Template.events

本文关键字：ui 模块 事件 语义 流星 绑定      更新时间：2023-09-26

不使用jQuery，我想用"Meteor-way"将回调绑定到语义ui模块，有点像Bootstrap 3允许的，例如:

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

与语义ui，似乎我只能定义回调函数时使用jQuery绑定在包含模板的onRendered()回调，例如:

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)它使关注点分离;代码清晰更难实现。

是否有一种方法来绑定这些事件使用流星的Template.events，如果是这样，什么是正确的语法来完成这一点?

谢谢。

请参考此解决方案

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

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

文档可以在这里找到

我的解决方案

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);
}
相关文章：