Disconnecting the model from the UI

@johnwargo wrote:

I’m having a weird problem editing some data in my application. I have a project page in my app, it’s setup as a modal page. I use the page to create a new project as well as to edit an existing project. When editing an existing project, I want to disconnect the edit page from the data model so changes the user makes to the project aren’t written back to the data source unless the user taps the Done button. I want changes discarded when the user taps the cancel button, but committed when the user taps the done button.

I had this issue a year or so ago and someone on slack, I think it was Mike Hartington, suggested using lodash to clone the project object before sending it to the project page for editing. That worked wonderfully in that older app, but in this Ionic V4 app, it’s not working. Even if the user taps Cancel the data’s written to the project array.

Here’s an example of the code that launches the project page with an existing project:

private async editProject(project: Project, idx: number) {
    const modal = await this.modalController.create({
      component: ProjectEditPage,
      // clone the project before passing it in,
      // to disconnect the project from the original
      componentProps: {
        project: _.clone(project),
        idx: idx
      }
    });
    // what happens when the user taps done or cancel
    modal.onDidDismiss().then((detail: OverlayEventDetail) => {
      // close the sliding item before you do anything else
      this.projectList.closeSlidingItems().then(() => {
        // Did we get a project back?
        if (detail.data !== null) {
          console.dir(detail.data);
          // Update the Projects array
          this.dataService.updateProject(detail.data, idx);
        }
      });
    });
    await modal.present();
  }

In this case, when the user taps cancel, null’s returned so the updateProject code doesn’t execute. I’ve confirmed that this is the case, but my project gets updated anyway.

Posts: 2

Participants: 1

Read full topic