仅当从列表中选择某些内容时才让 Meteor Autoform 显示输入框？

Question

我有一个选择框，询问用户“您是如何得知我们的？”

选项包括 Google、Yelp 和其他（请指定）。

选择“其他”选项并使用autoform验证该文本输入字段的内容时，如何自动启示空白文本输入框？

common.js：

Schema = {};
Schema.contact = new SimpleSchema({
    name: {
        type: String,
        label: "Your Name",
        max: 50
    },
    email: {
        type: String,
        regEx: SimpleSchema.RegEx.Email,
        label: "E-mail Address"
    },
    subject: {
        type: String,
        label: "Subject",
        max: 1000
    },
    message: {
        type: String,
        label: "Message",
        max: 1000
    },
    referral: {
        type: String,
        allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
    }
});

contact.js：

Template.Contact.helpers({
  contactFormSchema: function() {
    return Schema.contact;
  }
});

contact.html：

  {{#autoForm schema=contactFormSchema id="contactForm" type="method" meteormethod="sendEmail"}}
  <fieldset>
    <legend>Contact Us</legend>
    {{> afQuickField name="name"}}
    {{> afQuickField name="email"}}
    {{> afQuickField name="subject"}}
    {{> afQuickField name="message" rows=10}}
    {{> afQuickField name="referral" options="allowed"}}
    <div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
  </fieldset>
  {{/autoForm}}

此外，在架构的一部分中：

referral: {
    type: String,
    allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
}

如果选择了“其他”选项，我希望能够存储用户直接在referral 下输入的字符串值，而不必仅为该输入创建单独的命名条目。

有什么想法吗？

显然，我更喜欢“Autoform Way”，而不是与 jQuery 或事件侦听器或其他东西一起破解某些东西。

Answer 1

我想通了。绝对比我想象的要复杂得多。

common.js

Schema = {};
Schema.contact = new SimpleSchema({
    name: {
        type: String,
        label: "Your Name",
        max: 50
    },
    email: {
        type: String,
        regEx: SimpleSchema.RegEx.Email,
        label: "E-mail Address"
    },
    subject: {
        type: String,
        label: "Subject",
        max: 1000
    },
    message: {
        type: String,
        label: "Message",
        max: 1000
    },
    referral: {
        type: String,
        allowedValues: ['Google', 'Yelp', 'Other (Please Specify)']
    },
    specificReferral: {
        type: String,
        label: 'Other',
        max: 1000,
        optional: true,
        custom: function(){
          // console.log(this.field('referral').value);
          var customCondition = this.field('referral').value === 'Other (Please Specify)';
          // console.log("this field value: ", this.field('referral').value);
          // console.log("custom condition: ", customCondition);
          if (customCondition && !this.isSet && (!this.operator || (this.value === null || this.value === ""))) {
            return "required";
          }
        }
    }
});

contact.html - 关键是使用if 块

          {{#autoForm schema=contactFormSchema id="contactForm" type="method" meteormethod="sendContactEmail"}}
          <fieldset>
            {{> afQuickField name="name"}}
            {{> afQuickField name="email"}}
            {{> afQuickField name="subject"}}
            {{> afQuickField name="message" rows=10}}
            {{> afQuickField name="referral" options="allowed"}}
                {{#if afFieldValueIs name="referral" value="Other (Please Specify)"}}
                    {{> afQuickField name="specificReferral"}}
                {{/if}}
            <div>
              <button type="submit" class="btn btn-primary">Submit</button>
              <button type="reset" class="btn btn-default">Reset</button>
            </div>
          </fieldset>
          {{/autoForm}}

methods.js - check(contents, Schema.contact); 是必需的。

sendContactEmail: function(contents){

    check(contents, Schema.contact);

    // console.log(contents);

    if (!contents.specificReferral){
        contents.specificReferral = '';
    };

    contents.message = contents.message.replace(/\r?\n/g, '<br />');

    return Meteor.Mandrill.send({
      to: 'admin@acupuncturecleveland.com',
      from: contents.email,
      subject: contents.subject,
      html: 'A new message has been sent by ' + contents.name + ' and they found us through: ' + contents.referral + ' ' + contents.specificReferral + '<br /><br />' + contents.message
    });

}

contact.js - 钩子处理来自流星方法的错误或成功回调以发送电子邮件 - 它需要您使用 autoform 生成的表单的 id

Template.Contact.helpers({
  contactFormSchema: function() {
    return Schema.contact;
  }
});

Template.Contact.rendered = function(){
    AutoForm.hooks({
      contactForm: {
        onSuccess: function(operation, result, template) {
            // console.log('operation: ', operation);
            // console.log('result: ', result);
            // console.log('template: ', template);
          alert('Thank you for your inquiry! We will get back to you shortly.');
        },
        onError: function(operation, error, template) {
            alert('There was an error with your submission. Please try again.');
        }
      }
    });
};