Question

我正在尝试在我的应用程序中创建一个product编辑器页面。产品数据完全可变，但结构如下：

{
    "_id" : "543e759ff08da702009542d2",
    "fields" : [ 
        {
            "binding" : "title",
            "type" : "text",
            "_id" : "543e759ff08da702009542d8",
            "data" : "A TEST Product Title"
        }, 
        {
            "binding" : "description",
            "type" : "multiLineText",
            "_id" : "543e759ff08da702009542d7",
            "data" : "Oooo... Simply delicious text that describes the product in detail"
        }, 
        {
            "binding" : "price",
            "type" : "currency",
            "_id" : "543e759ff08da702009542d6",
            "data" : "£2.25"
        }, 
        {
            "binding" : "image",
            "type" : "image",
            "_id" : "543e759ff08da702009542d5",
            "data" : "http://www.google.com/image.png"
        }
    ]
}

到目前为止，在页面上我在表单中有一个{{#each fields}}块。

我想做的是为每种可能需要编辑的字段设置单独的“textEditor”，“currencyEditor”等模板，使所有逻辑保持良好分离。

如何最好地将相关模板注入视图？

非常粗略的方式类似于：

{{#each fields}}
  {{#if typeIs 'text'}}
    {{>textEditor}}
  {{/if}}
  {{#if typeIs 'currency'}}
    {{>currencyEditor}}
  {{/if}}
{{/each}}

Answer 1

使用Template.dynamic：

<template name="main">
    {{#each fields}}
        {{> Template.dynamic template=getTemplateName}}
    {{/each}}
</template>

Template.main.helpers({
    getTemplateName: function(){
        return this.type+"Editor"
    }
})

关于您在评论中提出的新问题：以下建议的解决方案不够好？您想要一个保存事件吗？

<template name="textEditor">
    <form>
        <input type="text" value="{{data}}">
    </form>
</template>

Template.textEditor.events({
    'submit form': function(){
        event.preventDefault()
        // Save text type.
    }
})

<template name="multiLineTextEditor">
    <form>
        <textarea>{{data}}</textarea>
    </form>
</template>

Template.textEditor.events({
    'submit form': function(){
        event.preventDefault()
        // Save multi line text type.
    }
})

Answer 2

基本上，＆＃34;动态模板＆＃34;是我正在寻找的，当然，他们已经可以使用了。

这是一篇博客文章：https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/

根据Iron Router中的值切换模板

2 个答案: