Как передавать данные между шаблонами в Meteor с помощью ReactiveVar - PullRequest
Новая
       6

Как передавать данные между шаблонами в Meteor с помощью ReactiveVar

0 голосов
/ 04 января 2019

Допустим, у меня есть 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>

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Вам следует избегать 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');
    },      
});
0 голосов
/ 04 января 2019

если у них нет родительско-дочерних отношений, вы можете использовать общую переменную ReactiveDict (здесь Session) для передачи данных между ними, как вы делаете.

но проблемавходные значения остаются прежними, когда страница обновляется, и это не самый лучший способ сделать это

для этого при onDestroyed обратном вызове шаблона вы можете очистить переменную Sessionзначения 

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

, поэтому, когда вы возвращаетесь на эту страницу / шаблон, нет данных для отображения.

...