将语义 UI 单选复选框绑定到 Meteor 事件处理程序

Question

我有几个语义 UI 单选框：

<div class="inline fields">
    <label>When: </label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="publish" tabindex="0" class="hidden" checked="checked">
            <label>Now</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="publish" tabindex="0" class="hidden">
            <label>Later</label>
        </div>
     </div>
     <div class="field">
         <div class="ui radio checkbox">
             <input type="radio" name="publish" tabindex="0" class="hidden">
             <label>On specified date</label>
         </div>
     </div>
 </div>

我可以像这样在模板 onRendered 函数中对它们进行更改：

$('.ui.checkbox').checkbox();

$(".ui.checkbox").checkbox('setting', 'onChange', function () {
    alert('fire!');
});

但我想使用 Meteor 事件来保持我的代码干净，我尝试了以下但它不起作用：

Template['article'].events({
    'change .ui.checkbox' : function () {
        alert('fire!');
    }
});

我也试过onChange。

有没有可能的线索？

Answer 1

如果您使用的是 manuel:viewmodel 包，这是可能的。该软件包已经为 Meteor

实现了 MVVM

例如，让我们在选中复选框时将按钮显示为主要按钮，在未选中时显示为正常按钮。

Html 代码将是

<template name="checked">
  <div class="row">
    <input type="checkbox" data-bind="checked: showPrimary"/>Show button as primary
  </div>
  <div class="row">
    <button data-bind="class: { btn-primary: showPrimary }">The Button!</button>
  </div>
</template>

而 Javascript 代码将是

Template.checked.viewmodel({
  showPrimary: false
});

这样我们就可以将 showPrimary 的值绑定到按钮的 class。

更多信息请参考http://viewmodel.meteor.com/

希望对您有所帮助！

将语义 UI 单选复选框绑定到 Meteor 事件处理程序

Bind Semantic UI radio checkboxes to Meteor event handler

javascript

jquery

meteor

semantic-ui