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

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）像您一样在它们之间传递数据。

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

对于 onDestroyed 模板回调，您可以清除 Session 变量值

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

所以当你回到这个page/template时，没有数据可以显示。

Answer 2

您应该尽可能避免Session。使用共享范围更好地确定超出模板的变量范围。 ES6 import/export 适合那个。

假设您想在这两个模板之间共享一个 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 中的模板之间传递数据

How to pass data between templates in Meteor with ReactiveVar

javascript

meteor

meteor-blaze