[英]How to pass data between templates in Meteor with ReactiveVar
Let's say I have a templateA.html
with input fields and then another separate templateB.html
which is supposed to display the values of the input fields from templateA.html
as they are typed in. I've gotten it to work with Session.set and Session.get
but the problem is the input values stay the same when the page is refreshed and it doesn't seem the best way to do this. 假设我有一个带有输入字段的
templateA.html
,然后是另一个单独的templateB.html
,应该在输入时显示来自templateA.html
的输入字段的值。我已经将其与Session.set and Session.get
但问题是刷新页面时输入值保持不变,这似乎并不是最好的方法。 I then tried to use ReactiveVar
but since I can't find any good examples on how to use it I'm a bit lost. 然后,我尝试使用
ReactiveVar
但由于找不到如何使用它的良好示例,我有点迷茫。 The following is how it works with Session
so maybe this will help understand what I'm trying to do with ReactiveVar
. 下面是它与
Session
工作的方式,因此也许这将有助于理解我正在尝试使用ReactiveVar
。
Template.templateA.events({
'change #batch_form': function(){
var batch_num = document.getElementById('batch_number').value;
var dist_name = document.getElementById('distributor_name').value;
var data = {
batch_number: batch_num,
dist_name: dist_name
}
Session.set('form_data', data);
}
})
Template.templateB.helpers({
input_data(){
return Session.get('form_data');
},
});
TemplateB.html TemplateB.html
<template name='templateB'>
<p>Batch #:{{input_data.batch_number}}</p>
<p>Batch #:{{input_data.dist_name}}</p>
</template>
if they don't have any parent-child relationship you can use common ReactiveDict variable(here Session
) to pass the data between just like you're doing. 如果他们没有任何父子关系,则可以像执行操作一样使用常见的ReactiveDict变量(此处为
Session
)在之间传递数据。
but the problem is the input values stay the same when the page is refreshed and it doesn't seem the best way to do this
但是问题是刷新页面时输入值保持不变,这似乎不是最好的方法
for this on onDestroyed
callback of template you can clear the Session
variable values 为此,可以在模板的
onDestroyed
回调中清除Session
变量值
Template.templateA.onDestroyed(function(){
Session.set('form_data', false); // or {}
})
so when you come back to this page/template, there is no data to display. 因此,当您返回此页面/模板时,没有数据可显示。
You should avoid Session
where you can. 您应尽可能避免使用
Session
。 Better scope your Template-exceeding variables with a shared scope. 使用共享范围更好地限制超出模板的变量的范围。 ES6 import/export are suitable for that.
ES6导入/导出适用于此。
Consider you want to share a ReactiveDict
(which behaves like Session
) as state between only those two Templates. 考虑您只想在这两个模板之间共享一个
ReactiveDict
(行为类似于Session
)作为状态。 You can create a new js file with the following content: 您可以使用以下内容创建一个新的js文件:
shared.js shared.js
import { ReactiveDict } from 'meteor/reactive-dict'
export const SharedAB = new ReactiveDict()
This gives you the control to share the state only between those Templates, that import the object. 这使您可以控制仅在导入对象的那些模板之间共享状态。
templateA.js templateA.js
import { SharedAB } from './shared.js'
Template.templateA.events({
'change #batch_form': function(){
var batch_num = document.getElementById('batch_number').value;
var dist_name = document.getElementById('distributor_name').value;
var data = {
batch_number: batch_num,
dist_name: dist_name
}
SharedAB.set('form_data', data);
}
})
templateB.js templateB.js
import { SharedAB } from './shared.js'
Template.templateB.helpers({
input_data(){
return SharedAB.get('form_data');
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.