在 Meteor JS 中创建多个组件实例

Question

我正在创建按钮、文本字段等元素，select 作为不同模板中的组件。如何在我的项目中的表单（模板）上创建此组件实例的倍数？一个例子是在一个页面上使用多个文本字段。

假设我想创建一个注册页面，我需要 3 个文本字段、2 个按钮，如何创建它们？

这是一个示例：

<template name="mybutton">
    <input type="button" name="{{butonname}}" class="{{buttonclass}}" placeholder="{{buttonplaceholder}}">
</template>

<template name="mytext">
    <input type="text" name="{{textname}}" class="{{textclass}}" placeholder="{{textplaceholder}}">
</template>

<template name="signup">
    {{> Template.dynamic template=getTemplateName }}
</template>

Template.signup.onCreated(funtion(){
    this.state = new ReactiveDict();
    this.state.set('targetTemplate', 'mybutton');
})

Template.sidebar.helpers({
    getTemplateName(){
        return Template.instance().state.get("targetTemplate");
    }
})

Answer 1

在 blaze 中，您可以根据需要多次包含模板 - 我不确定您在寻找什么 - 您的问题并不十分清楚。

{{> mytext }}
{{> mybutton }}
{{> mytext }}
{{> mytext }}
{{> mybutton }}

Answer 2

不确定你打算做什么，但如果我没猜错，你想在一个模板中渲染多个动态模板！？

如果是这样，那么你还需要不止一个动态Reactive数据源：

<template name="signup">
    {{> Template.dynamic template=getPrimaryTemplate }}
    {{> Template.dynamic template=getSecondaryTemplate }}
</template>


Template.signup.onCreated(function(){
    this.state = new ReactiveDict();
    this.state.set('primaryTemplate', 'mybutton');
    this.state.set('secondaryTemplate', 'myText');
})

Template.sidebar.helpers({
    getPrimaryTemplate(){
        return Template.instance().state.get("primaryTemplate");
    },
    getSecondaryTemplate(){
        return Template.instance().state.get("secondaryTemplate");
    },
});

更通用的方法：如果你必须处理许多动态模板，你也可以将其包装到一个助手中：

<template name="signup">
    {{> Template.dynamic template=(getTemplate 'header') }}

    {{> Template.dynamic template=(getTemplate 'body') }}

    {{> Template.dynamic template=(getTemplate 'footer') }}
</template>


Template.signup.onCreated(function(){
    this.state = new ReactiveDict();
    this.state.set('header', 'mybutton');
    this.state.set('body', 'myText');
    this.state.set('footer', 'someOtherTemplate');
})

Template.sidebar.helpers({
    getTemplate(templateName) {
        return Template.instance().state.get(templateName);
    }
});

在 Meteor JS 中创建多个组件实例

Create multiple instances of components in Meteor JS

templates

meteor

meteor-blaze

multiple-instances