In Meteor autoform, how to update a collection from a table row?

Question

How can I implement the table in the autoform demo http://autoform.meteor.com/updateaf?

It only has code for the update form, but not the clickable table. I'd like to know how the clickable table is linked to the update form. Thank you.

Answer 1

The code for the table is open source and available here: https://github.com/aldeed/autoform-demo/tree/master/client/views/updateaf

The (relevant html):

<table class="table table-bordered table-condensed">
    <thead>
      <tr>
        <td>Name</td>
        <td>Age</td>
      </tr>
    </thead>
    <tbody>
      {{#each people}}
        <tr class="person-row {{#if isSelectedPerson}}selected{{/if}}">
          <td>{{firstName}} {{lastName}}</td>
          <td>{{age}}</td>
        </tr>
      {{/each}}
    </tbody>
</table>

The autoform:

{{#autoForm id="afUpdateDemo" type=formType collection=Collections.People doc=selectedPersonDoc autosave=autoSaveMode}}
        {{> afQuickField name="firstName"}}
        {{> afQuickField name="lastName"}}
        {{> afQuickField name="age"}}
        {{#unless autoSaveMode}}
        <div class="form-group">
          <button type="submit" class="btn btn-primary" disabled="{{disableButtons}}">Submit</button>
          <button type="reset" class="btn btn-default" disabled="{{disableButtons}}">Reset Form</button>
        </div>
        {{/unless}}
      {{/autoForm}}

It looks like there's two way databinding involved, its fairly easy to customise to your own need.

The js is a bit lengthy to post here, everything in here is relevant: https://github.com/aldeed/autoform-demo/blob/master/client/views/updateaf/updateaf.js