javascript - 如何使用 ReactiveVar 在 Meteor 中的模板之间传递数据

Question

假设我有一个带有输入字段的 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>

Answer 1

您应该尽可能避免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');
    },      
});