Loading and Saving Form Data

Once your bindings are set up, you are ready to fill the bound UI components with data from your business objects.

Loading Data to Binder

You can use the read() method in the binder to read values from a business object instance into the UI components.

this.binder.read(person);

Using reset() will reset to the previous value, which is initially empty.

this.binder.reset();

There is also a clear() method which will set the form to empty.

this.binder.clear();

Saving Data

You can use submitTo() to submit a value to a callback. Notice that submitTo() is an asynchronous function, so you can use await to wait for the result.

The benefits of using submitTo() are:

  • The binder can track the submission progress, such as to disable a save button when a submission is ongoing.

  • Submission failures are handled automatically, no need to do an explicit try-catch.

For example, you can use submitTo() to submit to an endpoint method as follows:

await this.binder.submitTo(viewEndpoint.savePerson);

Alternatively, you can set up an onSubmit callback in a configuration object when creating Binder, then when submitting, you can just call the binder.submit() method.

private binder = new Binder(this, PersonModel, {
    onSubmit: viewEndpoint.savePerson
  });

binder.submit();