Meteor Blaze在Template.onCreated中訪問Template.contentBlock

Question

我正在為孩子們寫一個定制的Blaze塊助手：

<template name="parent">
    {{> Template.contentBlock ..}}
</template>

<template name="child">
    {{> Template.contentBlock ..}}
</template>

我的預期用例是擁有一個帶有任意子節點的模板，我在html文件中定義。

{{#parent}}

  {{#child id="child1" title="Child 1"}}
    <p>This is content of child 1</p>
  {{/child}}

  {{#child id="child2" title="Child 2"}}
    <p>This is content of child 2</p>
  {{/child}}

  {{#child id="childN" title="Child N"}}
    <p>This is content of child N</p>
  {{/child}}

{{/parent}}

到目前為止沒問題。 但是，在父模板的onCreated / autorun我希望能夠訪問child模板。 我想使用這些數據在父模板元素中動態創建

Template.parent.onCreated(function () {
    const instance = this;
    instance.state = new ReactiveDict();

    instance.autorun(function () {
        const contentBlocks = // how?
        instance.state.set("children", contentBlocks);
    });
});

Template.parent.helpers({
    children() {
        return Template.instance().state.get("children");
    }
});

children將在parent模板中使用的位置如下：

{{#parent}}

  {{#each children}}
    do something with {{this.value}}
  {{/each}}      

  {{#child id="child1" title="Child 1"}}
    <p>This is content of child 1</p>
  {{/child}}

  {{#child id="child2" title="Child 2"}}
    <p>This is content of child 2</p>
  {{/child}}

  {{#child id="childN" title="Child N"}}
    <p>This is content of child N</p>
  {{/child}}

{{/parent}}

我不想要的是訪問contentBlock的內容（ <p> ），而是獲取添加的child模板的列表。

使用當前的Template / Blaze API可以實現嗎？ 在這一點上，文檔有點薄。

它基本上與這篇文章相反：如何獲取父模板實例（當前模板）

編輯1：使用父視圖的渲染功能（僅部分工作）

我找到了一種方法來獲取parent模板的子項，但不是他們的data反應性：

// in Template.parant.onCreated -> autorun
const children = instance.view.templateContentBlock.renderFunction()
    .filter(child => typeof child === 'object')
    .map(el => Blaze.getData(el._render()));
console.log(children);
// null, null, null because Blaze.getData(view) does return null

我找到的另一種方法是使用共享的ReactiveVar但在我看來都不夠干凈。 我只想獲取父js代碼中的Template實例列表。

編輯2：使用共享的ReactiveVar（僅部分工作）

只要它在兩個模板的范圍內，就可以使用共享的ReactiveVar ：

const _cache = new ReactiveVar({});

Template.parent.onCreated(function () {
    const instance = this;
    instance.state = new ReactiveDict();

    instance.autorun(function () {
        const children = Object.values(_cache.get());
        instance.state.set("children", children);
    });
});

Template.parent.helpers({
    children() {
        return Template.instance().state.get("children");
    }
});

工作（但只渲染一次，不反應）：

Template.child.onCreated(function () {
    const instance = this;
    const data = Template.currentData();
    const cache = _cache.get();
    cache[data.id] = data;
    _cache.set(cache);
});

不工作 （子自動運行是設置值，但不呈現新值）：

Template.child.onCreated(function () {
    const instance = this;
    instance.autorun(function() {
        const instance = this;
        const data = Template.currentData();
        const cache = _cache.get();
        cache[data.id] = data;
        _cache.set(cache);
    });
});

Answer 1

這是我想出來的。 請告訴我這是你想要的還是我誤解了。

main.html中：

<body>
    {{> content}}
</body>

<template name="content">
    {{#parent}}

        {{#each children}}
            <p>do something with {{this.id}}</p>
            <p>data: {{this.tmpl.data.title}}</p>
        {{/each}}

        {{#child id="child1" title="Child 1" parentTemplate=this.parentTemplate}}
            <p>This is content of child 1</p>
        {{/child}}

        {{#child id="child2" title="Child 2" parentTemplate=this.parentTemplate }}
            <p>This is content of child 2</p>
        {{/child}}

        {{#child id="childN" title="Child N" parentTemplate=this.parentTemplate }}
            <p>This is content of child N</p>
        {{/child}}

    {{/parent}}
</template>

<template name="parent">
    {{> Template.contentBlock parentTemplate=template}}
</template>

<template name="child">
    {{> Template.contentBlock }}
</template>

main.js

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

import './main.html';

Template.content.helpers({
    children() {
        return this.parentTemplate.children.get();
    },
});

Template.parent.onCreated(function () {
    this.children = new ReactiveVar([]);
});

Template.parent.helpers({
    template() {
        return Template.instance();
    }
});

Template.child.onRendered(function () {
    const children = this.data.parentTemplate.children.get();
    children.push({ id: this.data.id, tmpl: this });
    this.data.parentTemplate.children.set(children);
});

輸出：

雖然它使用的ReactiveVar並不理想，它不依賴於任何全局，你可以將你的代碼放在不同的文件中，沒問題。

Meteor Blaze在Template.onCreated中訪問Template.contentBlock

問題描述

1 個解決方案

解決方案1
6 已采納 2018-03-17 09:30:19

Meteor Blaze在Template.onCreated中訪問Template.contentBlock

問題描述

1 個解決方案

解決方案1 6 已采納 2018-03-17 09:30:19

解決方案1
6 已采納 2018-03-17 09:30:19