假设我有一个带有输入字段的 templateA.html
,然后是另一个单独的 templateB.html
,它应该显示 输入字段的值templateA.html
因为它们被输入。我已经让它与 Session.set 和 Session.get
一起使用,但问题是刷新页面时输入值保持不变这似乎不是最好的方法。然后我尝试使用 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
<template name='templateB'>
<p>Batch #:{{input_data.batch_number}}</p>
<p>Batch #:{{input_data.dist_name}}</p>
</template>
最佳答案
您应该尽可能避免Session
。使用共享范围更好地限制超出模板的变量的范围。 ES6 导入/导出适合于此。
假设您希望仅在这两个模板之间共享一个 ReactiveDict
(其行为类似于 Session
)作为状态。您可以创建一个新的 js 文件,其中包含以下内容:
shared.js
import { ReactiveDict } from 'meteor/reactive-dict'
export const SharedAB = new ReactiveDict()
这使您可以控制仅在导入对象的模板之间共享状态。
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
import { SharedAB } from './shared.js'
Template.templateB.helpers({
input_data(){
return SharedAB.get('form_data');
},
});
关于javascript - 如何使用 ReactiveVar 在 Meteor 中的模板之间传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54032425/