2014-11-20 5 views
1

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

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; 
    } 
}); 

ответ

4

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

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

в

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

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

AutoForm документация AUTOFORM компонента в https://github.com/aldeed/meteor-autoform#autoform-1 объясняет type и doc атрибуты, как:

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

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. Измените значение атрибута doc на правильный документ для обновления или на нуль (или документ, содержащий значения по умолчанию) для вставки , возможно, путем обновления реактивной переменной.

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

+0

Спасибо за clarification- Я считаю, что мне нужно сделать, это добавить кнопку «Редактировать» в «People» таблицы в приведенном выше примере, что хватает _id документа и передает его на Автоформация для редактирования/обновления. Я зациклился на том, как это сделать. Не могли бы вы привести быстрый пример? – Alex

+0

Вы можете проверить http://autoform.meteor.com на примерах, которые вы можете использовать в качестве отправной точки. Или вы можете создать пример приложения с http://www.meteorkitchen.com (это автоматический генератор приложений, который использует autoform) и проверить сгенерированные источники. –