问泛型Aurelia对话框需要在脏和有效时启用保存

EN

import {DialogService} from 'aurelia-dialog'
import {EditDialog} from 'app/resources/dialogs/edit-dialog'

export class DialogHelper {
    static inject = [DialogService] 

    constructor(dialogService){
        this.dialogService = dialogService
    }

    edit(title, view, item, showDelete){
        return this.dialogService.open({
             viewModel: EditDialog, 
             model: {view: view, 
                     item: item, 
                    title: title, 
               showDelete: showDelete }  })
    }
}

let email = {emailAddress: "123@gmail.com", emailType: "Personal"}
this.dialogHelper.edit("Email",'./pages/email-dialog',email,false)

import {DialogController} from 'aurelia-dialog'

export class EditDialog {
   static inject = [DialogController]

   showDelete = false

   constructor(dialogController){
        this.dialogController = dialogController
   }

   activate(options){
       this.options = options
   }

<template>
    <ai-dialog>
       <ai-dialog-header style="display:flex; justify-content:space-between">
          <span>Add/Edit ${options.title}</span><i style="cursor:pointer" class="fa fa-close" click.delegate="dialogController.cancel()"></i>
       </ai-dialog-header>

       <ai-dialog-body>
           <compose view-model.bind="options.view" model.bind="options.item" ></compose>
       </ai-dialog-body>

       <ai-dialog-footer style="display:flex;justify-content:space-between;">
        <span>
<!--Should have an if.bind here but not sure how since vm composed above knows details -->
            <button click.delegate="dialogController.ok({type:'save'})">Save</button>
            <button click.delegate="dialogController.cancel()">Cancel</button>
        </span>
        <button if.bind="options.showDelete" click.delegate="dialogController.ok({type:'delete'})"><i class="fa fa-trash"></i></button>
       </ai-dialog-footer>
   </ai-dialog>
</template>

import {ValidationRules, ValidationController} from 'aurelia-validation'
import {computedFrom,NewInstance} from 'aurelia-framework'

export class EmailDialog {
    static inject = [NewInstance.of(ValidationController)]
    email = null

    constructor(validationController){
       this.validationController = validationController
       this.rule = ValidationRules.ensure(i => i.emailAddress)
                    .required()
                    .email()
                  .ensure(i => i.emailType)
                     .required()
                  .rules
    }

    activate(item){
       this.original = item
       this.email = JSON.parse(JSON.stringify(item))
    }

    @computedFrom('email.emailAddress', 'email.emailType')
    get canSave() {
        for(var prop in this.original){
            if(this.email[prop] != this.original[prop])
                 return false
        }

        return true
    }

}