Buffering Changes

To delay the application of changes and requests to your service's API endpoints you may choose to use the ember-buffered-proxy addon.

Cookbook: Buffering Changes During Editing

When a resource is given to a form template the input fields my be bound to the resources attr properties. And as each keyup event happens the value for that computed property changes resulting an attributeChanged event firing. As these events fire the service's adapter will call its updateResource method to persist the individual change close to real time. It is a more natural user experience to wait until the form input triggers a blur event then apply the changes:

focusOut() {
  if (!this.get('isNew')) {
    this.get('resource').applyChanges();
    this.set('isEditing', false);
    this.get('on-edit')(this.get('post')).finally(function() {
      this.set('isEditing', true);
    }.bind(this));
  }
}

• Defer the changes when creating a new resource using actions:

actions: {
  save() {
    this.set('isEditing', false);
    this.get('resource').applyChanges();
    this.sendAction('on-save', this.get('post'));
    return false;
  },
  cancel() {
    this.set('isEditing', false);
    this.get('resource').discardChanges();
    this.sendAction('on-cancel');
    return false;
  },
  update(model) {
    return this.store.updateResource('posts', model).catch(function(err) {
      Ember.Logger.error(err);
      model.rollback();
    });
  }
}

• Templates using a common component:

<p>
  <strong>Edit a Blog Post</strong>
</p>
{{form-post post=model isNew=model.isNew on-edit=(action "update")}}

<p>
  <strong>Create a Blog Post</strong>
</p>
{{form-post post=model isNew=model.isNew on-save="save" on-cancel="cancel"}}

• Component using a buffered proxy property for the model reference

resource: Ember.computed('post', function() {
  return BufferedProxy.create({ content: this.get('post') });
}).readOnly(),

• Component template for creating/editing the resource

{{#if isEditing}}
  {{#if isNew}}
    <button {{action 'done'}} class="u-button u-preview">Preview</button>
    <button {{action 'cancel'}} class="u-button u-cancel">Cancel</button>
  {{else}}
    <button {{action 'done'}} class="u-button u-preview">Done</button>
  {{/if}}
  <hr>
  {{! form for editing the resource attributes }}
  <div class="Admin-form">
    <p class="Admin-form-title">
      <label>Title:</label>
      <br>
      {{input type="text" value=resource.title name="title"}}
    </p>
    {{#if isNew}}
      <p class="Admin-form-date">
        <label>Date:</label>
        <br>
        {{input type="date" value=resource.date name="date" placeholder="xx/xx/xxxx"}}
      </p>
    {{/if}}
    <p class="Admin-form-excerpt">
      <label>Excerpt: [Markdown]</label>
      <br>
      {{textarea type="text" value=resource.excerpt name="excerpt"}}
    </p>
  </div>
{{else}}
  {{#if isNew}}
    <button {{action 'edit'}} class="u-button u-edit">Edit</button>
    <button {{action 'cancel'}} class="u-button u-cancel">Cancel</button>
    <button {{action 'save' resource}} class="u-button u-save">Save</button>
  {{else}}
    <button {{action 'edit'}} class="u-button u-edit">Edit</button>
  {{/if}}
  <hr>
  {{! preview of the resource }}
  <h1>{{resource.title}}</h1>
  <small>
    <span class="date">({{resource.date}})</span>
  </small>
  <hr>
  <div class="intro">
    {{resource.excerpt}}
  </div>
  <div class="below-the-fold">
    {{resource.body}}
  </div>
{{/if}}

Links

• source code: form-post component
• source code: form-post template
• ember-buffered-proxy