ember-buffered-proxy usage

ember-buffered-proxy.md

This example is for an ember-data model named 'plan'.

Proxy creation can be done in a computed property in the controller/component. It won't re-compute unless the entire plan changes (properties on plan can change and it won't trigger this). And then we can use applyBufferedChanges inside of the actions hash save action.

  // controller plans/edit.js
  planProxy: computed('plan', function() {
    return BufferedProxy.create({content: this.get('plan')});
  }),
  actions: {
    savePlan() {
      this.get('planProxy').applyBufferedChanges();
      this.get('plan').save();
    }
  }

And then to keep things clear, a component can get along just fine with no awareness that there's a proxy involved.

// route template for plans/edit.hbs
{{edit-plan
  plan=planProxy
  savePlan=(action 'savePlan')
}}

// component template plan-edit.hbs
<div>
  {{plan.name}}
</div>

<button {{action savePlan}}>
  Save Plan
</button>