Заполнение полей автоформы MeteorJS

Я использую очень хороший пакет Autoform в Meteor (https://github.com/aldeed/meteor-autoform< /а>). У меня отлично работают реактивные формы, но я хочу заполнить данные формы, чтобы разрешить редактирование на основе выбора пользователем строки в таблице. Очень простой пример можно найти здесь:

http://autoform.meteor.com/insertaf

По сути, я хотел бы заполнить данные формы данными из строки «Человек», которую пользователь нажимает для редактирования, но не уверен, как это сделать. Любые примеры того, как это сделать, будут высоко оценены. Спасибо!

Код формы:

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}
  <div class="form-group {{#if afFieldIsInvalid name='firstName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='firstName'}}</label>
    {{> afFieldInput name='firstName'}}
    {{#if afFieldIsInvalid name='firstName'}}
    <span class="help-block">{{{afFieldMessage name='firstName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='lastName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='lastName'}}</label>
    {{> afFieldInput name='lastName'}}
    {{#if afFieldIsInvalid name='lastName'}}
    <span class="help-block">{{{afFieldMessage name='lastName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='age'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='age'}}</label>
    {{> afFieldInput name='age'}}
    {{#if afFieldIsInvalid name='age'}}
    <span class="help-block">{{{afFieldMessage name='age'}}}</span>
    {{/if}}
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Add Person</button>
    <button type="reset" class="btn btn-default">Reset Form</button>
  </div>
{{/autoForm}}

Метеор Javascript

Schemas = {};

UI.registerHelper("Schemas", Schemas);

Schemas.Person = new SimpleSchema({
  firstName: {
    type: String,
    index: 1,
    unique: true
  },
  lastName: {
    type: String,
    optional: true
  },
  age: {
    type: Number,
    optional: true
  }
});

var Collections = {};

UI.registerHelper("Collections", Collections);

People = Collections.People = new Mongo.Collection("People");
People.attachSchema(Schemas.Person);

Meteor.publish(null, function () {
  return People.find();
});

People.allow({
  insert: function () {
    return true;
  },
  remove: function () {
    return true;
  }
});

javascript meteor meteor-autoform
person Alex    schedule 20.11.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Просто измените

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}

to 

{{#autoForm id="afUpdateDemo" type="update" doc=someDoc collection=Collections.People}}

поэтому вы измените свое свойство type с вставки на обновление, а также добавите свойство doc, чтобы сообщить автоформе, какой документ он будет обновлять. Вы можете вернуть doc из помощника по шаблону.

Документация по автоформе для компонента autoform на https://github.com/aldeed/meteor-autoform#autoform-1 объясняет атрибуты type и doc следующим образом:

type: Необязательно. Один из «вставить», «обновить» или «метод». Установка type на что-либо еще или его отсутствие вызовут любые хуки onSubmit, где вы можете выполнить собственную логику отправки. Если onSubmit не возвращает false или не вызывает this.event.preventDefault(), браузер также отправит форму. Это означает, что вы можете использовать AutoForm для создания и проверки формы, но при этом по-прежнему иметь ее POST в обычном режиме для какой-либо конечной точки HTTP, отличной от Meteor.

doc: требуется для формы обновления и должен иметь как минимум свойство _id. Передайте текущий объект документа, полученный, например, с помощью вызова findOne(). Для формы вставки вы также можете использовать этот атрибут для передачи объекта, для которого установлены значения формы по умолчанию (тот же эффект, что и установка атрибута значения для каждого поля в форме).

Примечание. Я также изменил свойство id, чтобы позже вы могли ссылаться на эту форму отдельно. Но есть способы, которыми вы можете повторно использовать одну форму для обновления/вставки, как описано в https://github.com/aldeed/meteor-autoform#can-i-reuse-the-same-quickform-or-autoform-for-both-inserts-and-updates

Можно ли повторно использовать одну и ту же форму quickForm или autoForm как для вставок, так и для обновлений?

Да. Ваш код, который переключается между состояниями, должен делать следующее в этом порядке:

  1. Измените значение атрибута типа на «вставить» или «обновить» в зависимости от ситуации, возможно, обновив реактивную переменную.

  2. Измените значение атрибута документа на правильный документ для обновления или на нуль (или документ, содержащий значения по умолчанию) для вставки, возможно, путем обновления реактивной переменной.

  3. Вызов AutoForm.resetForm(formId). Это устранит все существующие ошибки проверки формы.

person Serkan Durusoy    schedule 20.11.2014
comment
Спасибо за разъяснение. Я считаю, что мне нужно добавить кнопку «Редактировать» в таблицу «Люди» в приведенном выше примере, которая захватывает _id документа и передает его в автоформу для редактирования/обновления. Я застрял в том, как это сделать. Не могли бы вы привести быстрый пример? - person Alex; 20.11.2014
comment
Вы можете проверить autoform.meteor.com, чтобы найти примеры, которые можно использовать в качестве отправной точки. Или вы можете создать пример приложения с помощью meteorkitchen.com (это автоматический генератор приложений, использующий автоформирование) и проверить сгенерированные источники. - person Serkan Durusoy; 20.11.2014