Двусторонняя привязка не работает с пользовательским атрибутом Aurelia - PullRequest
Новая
       22

Двусторонняя привязка не работает с пользовательским атрибутом Aurelia

2 голосов
/ 28 июня 2019

Я пытаюсь реализовать это решение, данное Джереми Даньевым для грязной проверки . Я использую TypeScript, поэтому я адаптировал его код как можно лучше. По какой-то причине флаг isDirty на моей виртуальной машине не обновляется. Вот что у меня есть:

agency.ts - (мой vm) 

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;
    ...
}
...