Question

我正在尝试实现this solution given by Jeremy Danyow for dirty checking。我正在使用TypeScript，所以我已尽力调整了他的代码。由于某些原因，我的VM上的isDirty标志未更新。这是我所拥有的：

agency.ts-（我的虚拟机）

export class Agency {
    public isDirty : boolean = false;
    public agency : IAgency = null;

    ...
}

agency.html-（我的观点）

<template>
   <require from="../resources/attributes/dirty"></require>
    ${isDirty}                                <== Always displays false
    <form dirty.two-way="isDirty">            <== have also tried dirty.bind
         <div class="input-group">
               <label>Agency Name</label>
               <input type="text" value.bind="agency.name" />
         </div>
         ... 
    </form>
    <div if.bind="isDirty">
         <button>Save Changes</button>
         <button>Undo Changes</button>
    </div>
</template>

dirty.ts-（属性）

import {bindable, bindingMode} from 'aurelia-framework';

export class DirtyCustomAttribute{
   private view: any;
   private bindings: any[] = [];
   @bindable({defaultBindingMode: bindingMode.twoWay }) value: any;

   static inject = [Element]
   constructor(public element : HTMLElement) {}

   created(view) {
      this.view = view;
   }

   bind() {  
    this.bindings = this.view.bindings
        .filter(b => b.mode === bindingMode.twoWay && this.element.contains(b.target));

    let i = this.bindings.length;
    let self = this;
    while (i--) {
        let binding = this.bindings[i];
        binding.dirtyTrackedUpdateSource = binding.updateSource;
        binding.updateSource = function (newValue) {
            this.dirtyTrackedUpdateSource(newValue);
            if (!self.value) {
                self.value = true;
            }
        }
    }
   }

   unbind() { // See code in referenced link }
}

因此，使用日志记录，我可以看到正在调用updateSource()代码，并且正在设置self.value标志。但是，从不显示带有视图中按钮的div，并且${isDirty}模板始终显示为false。看来dirty.two-way="isDirty"并不是应该的双向绑定。

我要去哪里错了？

更新

所以看来这可能是由于撰写所致，所以我将添加额外的代码以显示其构成方式。

shell.ts

export class Shell
{
    public agencies : IAgency[] = []; //loaded in activate
    public tablist : any[] = [
        {title: "Detail", vm: PLATFORM.moduleName("./agency") },
         ...
    ];
    public selectedAgency : IAgency = null;
    public selectedVM : any = this.tablist[0];

}

shell.html

<template>
    ...
    <compose view-model.bind="selectedVM.vm" model.bind="selectedAgency"></compose>
</template>

agency.ts（附加）

activate(model){
    this.agency = model;
    ...
}

双向绑定不适用于Aurelia自定义属性

0 个答案: