Meteor ReactiveVar 从子模板访问父模板

Question

我在子模板中包含了父模板。我需要使用子模板中的父 ReactiveVar。我可以使用 Session 方法，但根据我的要求，Session 方法不起作用。如何从父模板访问 ReactiveVar 值？

HTML:

<template name="ParentTemplate">
   {{> ChildTemplate}}
</template>

<template name="ChildTemplate">
 //Some HTML content
</template>

JS

Template.ParentTemplate.onCreated(function () {
  this.myvalue = new ReactiveVar(5); //I tried this.data.myvalue but doesnt works
});
Template.ChildTemplate.helpers({
 'myhelper' : function(){
   return Template.parentData(1).myvalue.get();
 }
});

Answer 1

这是一个例子，child 是 parent 的直接后代：

<template name="parent">
  {{> child}}
</template>

<template name="child">
  <p>{{parentValue}}</p>
</template>

在这种情况下，我们可以像这样访问 parent 的实例变量：

Template.child.helpers({
  parentValue: function() {
    var parentView = Blaze.currentView.parentView.parentView;
    var parentInstance = parentView.templateInstance();
    // replace parentVariable with the name of the instance variable
    return parentInstance.parentVariable.get();
  }
});

如果DOM中两个模板的关系比较复杂，可以这样使用：

// replace .parent-class will the selector for your parent template
el = $('.parent-class')[0]
var parentInstance = Blaze.getView(el).templateInstance();
// replace parentVariable with the name of the instance variable
return templateInstance.parentVariable.get();

Answer 2

另一种可能的解决方案是将数据显式传递给 child。

// js
if (Meteor.isClient) {
    Template.parent.onCreated(function () {
        this.reactiveV = new ReactiveVar(42);
    });

    Template.parent.helpers({
        getReactiveVar: function() {
            return Template.instance().reactiveV;
        },
    });

    Template.parent.events({
        'click button': function(e, tmp) {
            tmp.reactiveV.set(tmp.reactiveV.get() + 2);
        },
    });
}

并在模板文件中：

<template name="parent">
    <p>this is the parent!</p>
    <button> var++ </button>
    {{> child parentData=getReactiveVar}}
</template>


<template name="child">
    <h3>
        child template
    </h3>
    {{parentData.get}}
</template>

当您按下按钮时，您将看到 child 模板更新。如果需要，您还可以在 Template.child.onCreated 函数中以其他方式分配 parent 数据。

这可能会在两个模板之间提供失败的耦合。

Meteor ReactiveVar 从子模板访问父模板

Meteor ReactiveVar access parent tempate from child template

javascript

meteor

meteor-blaze

meteor-helper