Question

假设我有一个带有输入字段的templateA.html，然后是另一个单独的templateB.html，应该在输入时显示来自templateA.html的输入字段的值。已经使它可以与Session.set and 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

如果他们没有任何父子关系，则可以使用常用的ReactiveDict变量（此处为Session）在之间传递数据。

但是问题是当页面是刷新，这似乎不是最好的方法

为此，您可以在模板的onDestroyed回调中清除Session变量值

Template.templateA.onDestroyed(function(){
   Session.set('form_data', false); // or {}
})

因此，当您返回此页面/模板时，没有任何数据可显示。

Answer 2

您应尽量避免使用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');
    },      
});

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

2 个答案: