Meteor JS的实时反应形式

Real time reactive form with Meteor JS

本文关键字：实时 JS Meteor      更新时间：2023-09-26

我已经开始学习流星了，有一些最初的概念我还没有掌握。

在Ember/Handlebars中，我可以写这样的

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

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

如何在流星中实现同样的效果？我试过这个

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

但它不起作用。我需要明确地写一个流星事件吗？

要详细说明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

我知道这很晚了，但要完成Geoffrey的答案：

实际上，建议使用scopedReactiveVar或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);
  }
});
相关文章：