Using Models from the Controller

Using Erstwhile models within the controller is pretty straightforward:

// in this case, gather the form data from the form
let formValues = $App.getComponent("create-todo").getValues();

// get a reference to the model
let model = $App.getModel('Todo');

/*
 * Call the create method on the model. The first argument is the data.
 * The return value is an axios promise, so you can handle that however
 * you would like.
 */
model.create(formValues).then(function(response) {
  if(response.data.success === false) {
    $App.scopes.modal.message = "There were errors in your form";
    $App.getComponent('create-todo').showErrors(response.data);
    $App.getComponent("create-todo-alert").show();
  } else {
    $App.getComponent("create-todo-alert").hide();
    $App.getComponent('create-todo').clearErrors();
    $App.closeModal();
    $App.getComponent('todo-list-table').redraw();
  }
}).catch(function(e) {
  console.log("error", e)
});

The developer doesn’t have to worry if the particular endpoint is GET, POST or whatever because the framework takes care of it. The first argument will automatically be the response body or the query string, depending on the need.

Sometimes an endpoint will also require adding parameters to the path. Erstwhile handles this too.

// get a reference to the model
let model = $App.getModel('Todo');

// pass in an empty first argument, and a map with the necessary data in the second
model.get({}, {todoID: args.id}).then(function(todoResponse) {
  $App.scopes.page.todo = todoResponse.data;
  $App.scopes.page.title = `Edit ${todoResponse.data.title}`;
}).catch(function(e) {
  console.log("error", e)
});

Related Articles