个人中心
gpt4 book ai didi

javascript - Meteor Blaze 访问 Template.onCreated 中的 Template.contentBlock

转载 作者：数据小太阳 更新时间：2023-10-29 04:41:34 25 4
gpt4 key购买 nike

我正在为 child 编写自定义 Blaze block 助手:

<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 可以实现吗？ documentation在这一点上有点单薄。

基本和这篇帖子相反:How to get the parent template instance (of the current template)

编辑 1:使用父 View 的 Renderfunction(仅部分工作)

我找到了获取 parent 的方法模板的 child ，但不是他们的 data react 性地:

// 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);
    });
});

最佳答案

这是我想出来的。请告诉我这是否是您想要的，或者我是否误解了。

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>

主要.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);
});

输出:

enter image description here

虽然它使用的 ReactiveVar 并不理想，但它不依赖任何全局变量，您可以将代码放在不同的文件中，没问题。

关于javascript - Meteor Blaze 访问 Template.onCreated 中的 Template.contentBlock，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49152119/

25 4 0
文章推荐： c# - 使用 C# .NET 从操纵杆获取输入
文章推荐： c# - 将 Decimal 数组转换为 Double 数组
文章推荐： c# - 文本框在回发时失去值(value)
文章推荐： c# - 在 C# 中使用 if (!bool) 与 if (bool == false)
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com