将语义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的值showPrimary到Button的类。

有关更多信息，请访问http://viewmodel.meteor.com/

希望这可以帮助 ！