Question

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

让我们说我想创建一个注册页面，我需要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

在大火中你可以随意添加一个模板 - 我不确定你在寻找什么 - 你的问题并不完全清楚。

{{> 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中创建多个组件实例

2 个答案: