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

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

假设我想创建一个注册页面，我需要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");
    }
})

{{>Template.dynamic Template=getTemplateName}
Template.signup.onCreated（函数（）{
this.state=new ReactiveDict（）；
this.state.set（'targetTemplate'，'mybutton'）；
})
Template.sidebar.helpers({
getTemplateName（）{
返回Template.instance（）.state.get（“targetTemplate”）；
}
})

在blaze中，您可以根据需要多次添加模板-我不确定除此之外您在寻找什么-您的问题并不完全清楚

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

---

在blaze中，您可以根据需要多次添加模板-我不确定除此之外您还需要什么-您的问题并不完全清楚

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

---

不确定您打算做什么，但如果我做对了，您希望在一个模板中渲染多个动态模板

如果是这样，那么您还需要多个动态响应数据源：

<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.dynamic Template=getPrimaryTemplate}
{{>Template.dynamic Template=getSecondaryTemplate}
Template.signup.onCreated（函数（）{
this.state=new ReactiveDict（）；
this.state.set（'primaryTemplate'，'mybutton'）；
this.state.set（'secondaryTemplate'，'myText'）；
})
Template.sidebar.helpers({
getPrimaryTemplate（）{
返回Template.instance（）.state.get（“primaryTemplate”）；
},
getSecondaryTemplate（）{
返回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);
    }
});

{{>Template.dynamic Template=（getTemplate'header'）}
{{>Template.dynamic Template=（getTemplate'body'）}
{{>Template.dynamic Template=（getTemplate'footer'）}
Template.signup.onCreated（函数（）{
this.state=new ReactiveDict（）；
this.state.set（'header'，'mybutton'）；
this.state.set（'body'，'myText'）；
this.state.set（'footer'，'someOtherTemplate'）；
})
Template.sidebar.helpers({
getTemplate（模板名称）{
返回Template.instance（）.state.get（templateName）；
}
});

不确定您打算做什么，但如果我做对了，您希望在一个模板中呈现多个动态模板

如果是这样，那么您还需要多个动态响应数据源：

<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.dynamic Template=getPrimaryTemplate}
{{>Template.dynamic Template=getSecondaryTemplate}
Template.signup.onCreated（函数（）{
this.state=new ReactiveDict（）；
this.state.set（'primaryTemplate'，'mybutton'）；
this.state.set（'secondaryTemplate'，'myText'）；
})
Template.sidebar.helpers({
getPrimaryTemplate（）{
返回Template.instance（）.state.get（“primaryTemplate”）；
},
getSecondaryTemplate（）{
返回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);
    }
});

{{>Template.dynamic Template=（getTemplate'header'）}
{{>Template.dynamic Template=（getTemplate'body'）}
{{>Template.dynamic Template=（getTemplate'footer'）}
Template.signup.onCreated（函数（）{
this.state=new ReactiveDict（）；
this.state.set（'header'，'mybutton'）；
this.state.set（'body'，'myText'）；
this.state.set（'footer'，'someOtherTemplate'）；
})
Template.sidebar.helpers({
getTemplate（模板名称）{
返回Template.instance（）.state.get（templateName）；
}
});

使用

模板.dynamic

而不是直接调用模板的原因是什么？我在运行时在同一帧中加载不同的模板。加载所有模板会破坏我想要实现的可重用性。你应该描述你的约束条件，否则可能的答案将不符合它们。使用

模板的原因是什么。动态
而不是直接调用你的模板？我在同一框架中运行时加载不同的模板。加载所有模板将无法实现我想要实现的可重用性。你应该描述你的限制，否则潜在的答案将无法满足它们。