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

时间:2015-10-23 06:11:01

标签: javascript node.js meteor meteor-autoform meteor-collection2

现在我有多个过滤器

<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,
  },
},

是否可以使用autoformcollection2创建一个已填充选项的简单select元素而不自行创建html并使用选项填充模板?

我想我可以做{{> quickField name=fieldName }}这样的事情,但我不知道如何判断应该从哪个架构看,以及如何对选择更改做出反应。

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

1 个答案:

答案 0 :(得分:0)

你的AutoForm:

{{#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"
        }
    }
});
相关问题