與流星JS實時反應形式

Question

我已經開始學習流星，並且還有一些我還沒有掌握的初始概念。

在灰燼/車把我可以寫這樣的事情

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

而且當用戶鍵入的東西在輸入框，它會實時顯示。

如何在Meteor中實現相同？我試過這個

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

但它不工作。我是否需要明確寫出Meteor事件才能發生？

Answer 1

爲了詳細說明保羅的答案，是的，你需要定義一個事件。此外，該模板需要知道從哪裏獲得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

Answer 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); 
    } 
});