Meteor:自定义AutoForm,包含对象数组

时间:2021-07-09 04:01:45

I have a SimpleSchema which includes an array of objects:

我有一个SimpleSchema,它包含一个对象数组:

Things.attachSchema( new SimpleSchema({
    name: {
        type: String,
        label: "Name",
        max: 50
    },
    fields: { 
        type: [Object],
    },
    fields.$.name: {
        type: String
    },
    fields.$.amount: {
        type: Number
    }
}) )

I'm trying to create custom form making use of afEachArrayItem, but I can't work out how to refer to the attributes of each object within the array.

我正在尝试使用afEachArrayItem创建自定义表单,但我无法弄清楚如何引用数组中每个对象的属性。

My template looks like this (with html stripped out):

我的模板看起来像这样(删除了html):

{{#autoForm collection="things" id="myForm" }}
    {{> afQuickField name='schemaName'}}

    {{#afEachArrayItem name="fields"}}

        {{> afFieldInput name="name"}  
        {{> afFieldInput name="amount"}

    {{/afEachArrayItem}}

{{/autoForm}}

What should be passed to "name" in the afFieldInputs?

什么应该传递给afFieldInputs中的“name”?

2 个解决方案

#1


12  

To access the fields of the objects within the array, you can use:

要访问数组中对象的字段,您可以使用:

this.current

So to fix the example given above, use:

因此,要修复上面给出的示例,请使用:

{{#autoForm collection="things" id="myForm" }}
    {{> afQuickField name='schemaName'}}

    {{#afEachArrayItem name="fields"}}

        {{> afFieldInput name=this.current.name}}  
        {{> afFieldInput name=this.current.amount}}

    {{/afEachArrayItem}}

{{/autoForm}}

I don't know if this is the correct way to do this, but it seems to work.

我不知道这是否是正确的方法,但它似乎工作。

#2


4  

You can add buttons to add/remove the array items as so:

您可以添加按钮来添加/删除数组项,如下所示:

{{#autoForm collection="things" id="myForm" }}
    {{> afQuickField name='schemaName'}}

    {{#afEachArrayItem name="fields"}}

        <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button>
        {{> afFieldInput name=this.current.name}}  
        {{> afFieldInput name=this.current.amount}}

    {{/afEachArrayItem}}
    <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="fields"><span class="glyphicon glyphicon-plus"></span></button>

{{/autoForm}}

This will use the built-in buttons and icons for AutoForm, so feel free to modify the HTML as necessary.

这将使用AutoForm的内置按钮和图标,因此可以根据需要随意修改HTML。

#1


12  

To access the fields of the objects within the array, you can use:

要访问数组中对象的字段,您可以使用:

this.current

So to fix the example given above, use:

因此,要修复上面给出的示例,请使用:

{{#autoForm collection="things" id="myForm" }}
    {{> afQuickField name='schemaName'}}

    {{#afEachArrayItem name="fields"}}

        {{> afFieldInput name=this.current.name}}  
        {{> afFieldInput name=this.current.amount}}

    {{/afEachArrayItem}}

{{/autoForm}}

I don't know if this is the correct way to do this, but it seems to work.

我不知道这是否是正确的方法,但它似乎工作。

#2


4  

You can add buttons to add/remove the array items as so:

您可以添加按钮来添加/删除数组项,如下所示:

{{#autoForm collection="things" id="myForm" }}
    {{> afQuickField name='schemaName'}}

    {{#afEachArrayItem name="fields"}}

        <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button>
        {{> afFieldInput name=this.current.name}}  
        {{> afFieldInput name=this.current.amount}}

    {{/afEachArrayItem}}
    <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="fields"><span class="glyphicon glyphicon-plus"></span></button>

{{/autoForm}}

This will use the built-in buttons and icons for AutoForm, so feel free to modify the HTML as necessary.

这将使用AutoForm的内置按钮和图标,因此可以根据需要随意修改HTML。