带有事件生成的输入的流星绑定值

Question

我有一个表单输入，其值绑定到响应式数据源：

<input type="text" name="first-name" id="first-name" required value="{{currentUser.profile.firstName}}" />

我想在输入端观看“更改”事件：

$('#first-name').change(function() { alert('Value changed!'); });

如果我直接在输入中更改值，这会很好。但是，如果值响应式更改，则不会触发更改事件。

将值绑定到表单元素以便在响应式数据源更改时触发“更改”事件的最佳方法是什么？

Answer 1

最佳解决方案是使用manuel:viewmodel。您将 UI 的状态保存在 javascript 对象中，并将 UI 元素绑定到该对象的属性。

例子：

首先将包添加到项目中meteor add manuel:viewmodel

然后在 Html 中执行以下操作：

<template name="loginBox">
  First Name: <input type="text" data-bind="value: first"/>
  <br/>
  Last Name: <input type="text" data-bind="value: last"/>
  <div data-bind="text: greeting"></div>
  <a data-bind="enabled: canEnter, hover: showError" class="btn-primary">Enter Site</a>
  <span data-bind="text: errorText" class="text-error"></span>
</template>

然后在 Javascript 文件中做必要的绑定

Template.loginBox.viewmodel({
  first: '',
  last: '',
  greeting: function() {
    return "Hello " + this.first() + " " + this.last();
  },
  canEnter: function() {
    return !!this.first() && !!this.last();
  },
  showError: false,
  errorText: function() {
    if (this.canEnter() || !this.showError()) {
      return '';
    }
    return "Please enter your first and last name";
  }
});

这里我们将输入/文本元素的值绑定到视图模型的属性“first”。

结果是视图模型对象将与输入框保持同步。如果你改变了 texbox 中的值，那么 viewmodel 的 'first' 属性的值也会改变，反之亦然。

欲了解更多信息http://viewmodel.meteor.com/

Answer 2

这是我最初的解决方案，我对此并不特别兴奋：

Template.signUpPersonalDetails.rendered = function() {
  this.autorun(function() {
    if (Meteor.user() && Meteor.user().userAccount) {
      var userAccount = Meteor.user().userAccount;
      $('#first-name').val(userAccount.firstName).change();
      $('#last-name').val(userAccount.lastName).change();
      $('#email').val(userAccount.email).change();
      $('#phone-number').val(userAccount.phoneNumber).change();
      $('#postcode').val(userAccount.shippingPostcode).change();
    }
  });
};