javascript - 在 Meteor 中使用 autoform 创建简单的输入字段

Question

现在我有多个过滤器

<template name="filter1">
  {{> selectFilter fieldName=fieldName options=options}}
</template>

<template name="filter2">
  {{> selectFilter fieldName=fieldName options=options}}
</template>

<template name="filter3">
  {{> selectFilter fieldName=fieldName options=options}}
</template>

<template name="filter4">
  {{> selectFilter fieldName=fieldName options=options}}
</template>

<template name="selectFilter">
  <select name="{{fieldName}}" class="form-control">
    <option value="">Any</option>
    {{#each options}}
      <option value="{{value}}" selected="{{#if sessionEquals ../fieldName value}}selected{{/if}}">{{label}}</option>
    {{/each}}
  </select>
</template>

我填充的

Template.filter1.helpers( {
  fieldName: 'fieldName',
  options: getOptions
} );

Template.selectFilter.helpers( {
  sessionEquals: function ( key, value ) {
    return Session.equals( key, value );
  }
} );

Template.selectFilter.events( {
  'change select': function ( event ) {
    var $el = $( event.currentTarget );
    var variableName = $el.attr( 'name' );
    var value = $el.val();

    if ( isInt( value ) ) {
      value = parseInt( value, 10 );
    }

    Session.set( variableName, value );
  },
} );

有了collection2，我设置options了：

field1: {
  type: Number,
  optional: true,
  autoform: {
    options: getOptionsForField1,
  },
},

是否可以使用autoform和collection2创建一个select已经填充了选项的简单元素，而无需自己创建 html 并使用选项填充模板？

我想我可以做类似的事情{{> quickField name=fieldName }}，但我不知道如何判断它应该从哪个模式中查看，以及如何对选择更改做出反应。

我只是认为在我的模式中指定选项并填充模板的选项似乎很愚蠢。这应该自动完成。

Answer 1

您的自动表格：

{{#autoForm collection="Collection" id=insertCollection type="insert"}}
    {{> afQuickField name='field1'}}
{{/autoForm}}

您的 SimpleSchema：

Collection = new Mongo.Collection('collection');
Collection.attachSchema(new SimpleSchema({
    field1: {
        type: Number,
        optional: true,
        autoform: {
            options: function() {
                return [1,2,3,4,5,6,7,8,9];
            },
            type: "select"
        }
    }
});