jonjamz / blaze-forms

Dead easy reactive forms with validation (Meteor).
https://atmospherejs.com/templates/forms
MIT License
113 stars 11 forks source link

Add chapter to docs about new support for reactive initial form data #44

Closed jonjamz closed 9 years ago

jonjamz commented 9 years ago

When data is changed remotely during a form session, there are three ways to handle the experience. First, ignore the change and let the user submit their new form. Second, patch in the changes mid-session without any type of prompt. Third, notify the user of remote changes and give them the opportunity to add those into the current session (giving them time to save their work elsewhere).

templates:forms can now be configured to support all three of the above options.

Here's a working example of how easy it is to present a user with the option to accept or ignore remote changes.

<template name="inputElement">
  <input type={{type}} placeholder={{schema.instructions}} class="reactive-element" value={{value}}>
  {{#if remoteValueChange}}
    <p style="color:black">
      This field has been updated remotely. Load the latest 
      <span title={{newRemoteValue}}>changes</span>?
      <button class="accept-changes">Load</button> <button class="ignore-changes">Ignore</button>
    </p>
  {{/if}}
</template>
Template['inputElement'].events
  'click .accept-changes': (e, t) ->
    e.preventDefault()
    inst = Template.instance()
    component = inst[ReactiveForms.namespace].acceptValueChange()

  'click .ignore-changes': (e, t) ->
    e.preventDefault()
    inst = Template.instance()
    component = inst[ReactiveForms.namespace].ignoreValueChange()