Question

我有子模板附带的父模板。我需要使用子模板中的父{J {1}}。我可以使用ReactiveVar方法，但对于我的要求Session方法不起作用。如何从父模板访问ReactiveVar值？

HTML：

Session

JS

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

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

Answer 1

以下是一个例子，孩子是父母的直系后裔：

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

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

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

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

另一种可能的解决方案是明确地将数据传递给孩子。

// 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>

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

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

Meteor ReactiveVar从子模板

2 个答案: