代码之家 › 专栏 › 技术社区 › ken4ward

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

multiple-instances meteor-blaze meteor templates

ken4ward · 技术社区 · 6 年前

我正在创建button、textfield、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");
    }
})

2 回复 | 直到 6 年前

Jankapunkt 6 年前

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

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

Michel Floyd 6 年前

在Blaze中,你可以根据自己的需要多次添加一个模板——我不确定你在寻找什么——你的问题并不完全清楚。

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

推荐文章

Abhishek Ojha · 为什么我的代码接受其他数据类型以及模板中的给定数据类型?[副本]

2 年前

TCD · 标准库非类型模板类是否显式实例化?

2 年前

onehundredquestions guy · 在不实例化的情况下将模板函数作为参数传递?[副本]

2 年前

sovesti · 参数较少的模板函数中的演绎

2 年前

KiraHoneybee · 具有构造函数参数的模板化类

2 年前

Seymore Glass · 模板不工作的默认参数

2 年前

Alex Hodges · 是否有一种更惯用的方法来专门化通过模板传递的标志的行为?

2 年前

Alexander Daum · 模板参数中对模板类型的引用

6 年前

ledonter · 为什么注入的类名有时不被视为类模板中的模板名?

6 年前

RBaum · 从WooCommerce“订单保留”和“新订单”电子邮件中删除订单

6 年前