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的值绑定到Button的类。

有关详细信息，请参阅http://viewmodel.meteor.com/

希望这有帮助！

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

1 个答案: