Question

使用Meteor我得到了一个模板，其中包含另外两个模板A＆amp; B. 得到一个<select>标记，B得到一个<canvas>，根据模板A的选择，将绘制一些东西。

当选择更改时，A应调用B的someMethod`，此方法应从db获取一些数据，然后绘制画布。我怎样才能实现这种行为？

简单地使用Template.B.someMethod = function (bla) ...然后在调用Template.B.someMethod(hi)的JS中导致错误，因为someMethod访问B的DOM canvas元素，当A更改时不会呈现在装货时第一次。

调用该方法的合适方法是什么？或者我应该将两个模板合并在一起吗？

Answer 1

无需组合A和B模板。这里父母的目的是协调A和B之间的数据变化。即你不会在B上调用函数，而是给它所需的数据，以便它可以响应。

P（父）可以将A数据通过select更改时调用的函数推入A中。然后P可以通过Meteor的正常反应将数据推送到B. B然后可以响应这种变化。

e.g。

<template name="P">
    {{A changeHandler=getChangeHandler}}
    {{B selection=selectedData}}
</template>

P.js：

Template.P.onCreated(function() {
    this.data = new ReactiveVar();
});

Template.P.helpers({
    getChangeHandler() {
        let template = Template.instance();

        return function(data) {
            template.data.set(data);
        }
    },

    selectedData() {
        return Template.instance().data.get();
    }
});

A.js：

Template.A.onCreated({
    this.changeHandler = new ReactiveVar(Template.currentData().changeHandler); // i think this is right
});

每当A数据发生变化时：

let changeHandlerFn = template.changeHandler.get();

if (_.isFunction(changeHandlerFn)) {
    changeHandlerFn(updatedData);
}

Answer 2

除了@ zim的答案，您还可以使用https://stackoverflow.com/a/43687311/5108796的变体：

HTML （实际上是Spacebars）

<template name="Parent">
    {{> Child1 sharedVar1=sharedVar}}
    {{> Child2 sharedVar2=sharedVar}}
</template>

<强>的JavaScript

import { ReactiveVar } from 'meteor/reactive-var';

// Just initialize the variable. Could also be within the scope of a template.
var myReactiveVar = new ReactiveVar();

Template.Parent.helpers({
    // This is what will be sent to Child1 and Child2.
    sharedVar: function () {
        return myReactiveVar;
    }
});

Template.Child1.events({
    'change select': function (event, template) {
        // This will trigger a re-execution of Child2 autorun.
        template.data.sharedVar1.set(myNewValue);
    }
});

Template.Child2.onCreated(function () {
    var sharedVar2 = this.data.sharedVar2;

    this.autorun(function () {
        // As usual, this is reactive.
        var newValue = sharedVar2.get();

        // Perform some operation using newValue…
    });
});

（当然你可以将它们分成几个JS文件）

渲染后从其他模板调用方法

2 个答案: