template.html

{{#if objectsPromise.isPending}}
    <p>Loading...</p>
  {{/if}}
  {{#if objectsPromise.isResolved}}
    {{#each objects}}
        {{#each .}}
          {{#if renderField(%key)}}
            <td>{{formatValue(.)}}</td>
          {{/if}}
        {{/each}}
      </tr>
    {{/each}}
  {{/if}}

viewModel.js

export const ViewModel = viewModel.extend({
  define: {
    objectModel: {
      value: null
    },
    editable: {
      type: 'boolean',
      value: false
    },
    filter: {
      type: '*',
      value: null
    },
    group: {
      type: 'string',
      value: null
    },
    objectsPromise: {
      get: function() {
        return this.attr('objectModel').findAll({
          filter: this.attr('filter') ? 'q=' + JSON.stringify(this.attr('filter')) : '',
          group: this.attr('group') ? 'group=' + this.attr('group') : ''
        });
      }
    },
    objects: {
      get: function(value, setAttr) {
        this.attr('objectsPromise').then(setAttr);
      }
    },
      formSubmit: function(scope, form, event) {
    var data = can.$(form).serializeArray();
    var edit_object = scope.attr('edit_object');
    for (var i = 0; i < data.length; i++) {
      var newData = data[i];
      if (edit_object.attr(newData.name) !== newData.value) {
        edit_object.attr(newData.name, newData.value);
      }
    }
    console.log(edit_object.save());
    scope.attr('edit_object', null);
    //prevent the form from submitting
    return false;
  },
});