Meteor JS 的实时反应形式答案

【问题标题】：Real time reactive form with Meteor JSMeteor JS 的实时反应形式
【发布时间】：2014-12-14 10:03:00
【问题描述】：

我已经开始学习 Meteor，但我仍然没有掌握一些初始概念。

在 Ember/Handlebars 我可以写这样的东西

<script type="text/x-handlebars">
  {{input type="text" value=name}}
  Hello, {{name}}
</script>

每当用户在输入框中输入内容时，它都会实时显示。

如何在 Meteor 中实现相同的功能？这个我试过了

<div>
  <input type="text" value="{{name}}">
  Hello, {{name}}
</div>

但它不起作用。我是否需要明确编写 Meteor 事件才能发生这种情况？

【问题讨论】：

简短的回答是肯定的，您至少需要一个模板事件处理程序。输入元素中的value="{{name}}" 未设置双向数据流。 {{name}} 仅在（重新）生成包含输入元素的模板时进行评估。

标签： javascript ember.js meteor handlebars.js

【解决方案1】：

要详细说明 Paul 的回答，是的，您需要定义一个事件。此外，模板需要知道从哪里获取 name 的值。这是一个更充实的例子：

<template name="hello">
  <div>
    <input type="text" value="{{name}}">
    Hello, {{name}}
  </div>
</template>

和：

if (Meteor.isClient) {
  Session.setDefault("name", "world");

  Template.hello.helpers({
    name: function () {
      return Session.get("name");
    }
  });

  Template.hello.events({
    'keyup input': function (event) {
      Session.set("name", event.target.value);
    }
  });
}

现场示例：http://meteorpad.com/pad/TsHu27WASi6KdqaA6

【讨论】：

【解决方案2】：

我知道这是迟到的，但要完成杰弗里的回答：

实际上是recommended 使用作用域 ReactiveVar 或ReactiveDict 在处理表单数据等非全局变量时。

假设这个模板：

<template name="form">
  <form>
    <input id="firstName" type="text" value="">
    <input id="lastName" type="text" value="">
    <p>Hello, {{fullName}}</p>
  </form>
</template>

如您所见，我没有直接在模板中设置输入值以避免onChange 事件的无限循环。

与ReactiveVar:
首先在项目根目录的终端中运行meteor add reactive-var，然后：

import { Template }     from 'meteor/templating';
import { ReactiveVar }  from 'meteor/reactive-var';

Template.form.onCreated(function() {
  this.form = new ReactiveVar({
    firstName : '',
    lastName  : ''
  });
});

Template.form.helpers({
  fullName : () => {
    let form = Template.instance().form.get();
    return `${form.firstName} ${form.lastName.toUpperCase()}`;
  }
});

Template.form.events({
  'keyup #firstName, change #firstName'( event ) {
    let form = Template.instance().form;
    form.set(Object.assign(form.get(), { firstName : event.currentTarget.value }));
  },
  'keyup #lastName, change #lastName'( event ) {
    let form = Template.instance().form;
    form.set(Object.assign(form.get(), { lastName : event.currentTarget.value }));
  }
});

与ReactiveDict:
首先在项目根目录的终端中运行meteor add reactive-dict，然后：

import { Template }     from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';

Template.form.onCreated(function() {
  this.form = new ReactiveDict();

  this.form.set('firstName','');
  this.form.set('lastName','');
});

Template.form.helpers({
  fullName : () => {
    let form = Template.instance().form;
    return `${form.get('firstName')} ${form.get('lastName').toUpperCase()}`;
  }
});

Template.form.events({
  'keyup #firstName, change #firstName'( event ) {
    Template.instance().form.set('firstName', event.currentTarget.value);
  },
  'keyup #lastName, change #lastName'( event ) {
    Template.instance().form.set('lastName', event.currentTarget.value);
  }
});

【讨论】：