2016-02-26 3 views
8

UPDATE: Похоже, это известная ошибка: https://github.com/aurelia/templating/issues/253
Я оставляю его здесь для целей ссылки/возможность поиска.Двусторонний связывания в Aurelia пользовательского атрибут

Кодекс:

ввода-mask.ts (Полный код можно увидеть here)

@customAttribute('input-mask') 
@inject(Element) 
export class InputMaskCustomAttribute { 

    @bindable({ defaultBindingMode: bindingMode.twoWay, 
       changeHandler: 'onUnmaskedValueChanged' }) 
    unmaskedValue: any; 

    onUnmaskedValueChanged(newValue, oldValue) { 
     console.log('unmaskedValue updated from inside the custom attribute'); 
    } 

    @bindable 
    mask: string; 

    attached() { 

      this.eventTarget.on('focusout', (e: any) => { 
      this.unmaskedValue = (<any>$(this.element)).cleanVal() 
      this.fireEvent(e.target, 'input'); 
      }); 
    } 

    // Code for constructor, fireEvent and to setup the mask... 
} 

carrier.html

<input input-mask="mask.bind: carrier.airbillMask; unmasked-value.bind: airbill" 
     value.bind="formattedAirbill"/> 

ОБНОВЛЕНИЕ: Чтобы обойти эту ошибку, измените ее на unmasked-value.two-way, и привязка будет работать.

carrier.ts

@bindable({ defaultBindingMode: bindingMode.twoWay}) 
carrier: EntityInterfaces.ICarrier; 

@bindable({ defaultBindingMode: bindingMode.twoWay }) 
formattedAirbill: string; 

@bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'onAirbillChanged' }) 
airbill: string; 

onAirbillChanged() { 
    console.log('Airbill was set!'); 
} 

Проблема:

данные, кажется, впадают в @bindable переменную просто отлично. По мере изменения маски значение в пользовательском атрибуте изменяется.

Но, по-видимому, оно не течет, если изменения сделаны в пользовательском атрибуте.

Пример сценария: После того как я изменить значение в поле ввода и выхода на вход, в focusout пожаров событий и о консоли, которая указывает, что разоблачены Value был обновлен внутри пользовательских атрибутов принтами:

unmaskedValue обновляется внутри пользовательских атрибутов

Но (когда вход теряет фокус) заявление консоли говоря, что airbill на файл carrier.ts был обновлен не срабатывает, когда я выхожу на поле ввода:

Это не срабатывает:
console.log («! накладная был установлен»);

Это, похоже, показывает мне, что привязка не является действительно двусторонней.

Вопрос:

Как я могу сделать это связывание двухстороннего? Итак, когда я обновляю unmaskedValue внутри пользовательского атрибута, он обновит значение привязки в модели представления?

Примечание: В качестве обходного пути я смог изменить unmasked-value.bind как вызов метода (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)) и обновить значение в этом методе. Поэтому мне не нужно это работать.Но я хотел бы знать, возможно ли это для будущего использования.

+0

Похоже, это известная ошибка: https://github.com/aurelia/templating/issues/253 – Vaccano

+0

Изменение этой привязки к '.two-way' (а не просто' .bind') в HTML работает вокруг этой проблемы. – Vaccano

+1

Похоже, эта проблема была закрыта, можете ли вы использовать ее так, как вы хотели сейчас, без обходного пути? –

ответ

-1

Попробуйте инициализировать переменную unmaskedValue значением по умолчанию. Попробуйте null, undefined, '' и так далее. Я делал это раньше, но Я не помню, в какой версию (конечно, это была бета)