Дата настраиваемого элемента aurelia - отличное значение обновления datepicker при обновлении

Question

Я создал пользовательский элемент (date.html/date.js). Это отлично работает, если я использую его на странице редактирования. Он уже связал объект (выбранное значение = ''), а затем возвращает объект БД (мои данные редактирования) из БД, мне нужно в этот момент повторно связать выбранное значение.

У меня была эта проблема с другим пользовательским элементом, который я создал (выпадающий список), я решил проблему, добавив "selectedChanged", который затем повторно связался после того, как он был в базе данных.

Моя проблема в том, что я попробовал selectedChanged и добавил отладчик (он никогда не срабатывает), я думаю, это потому, что я должен использовать что-то другое, но я не знаю что?

selectedChanged(){
    // if chosen item isnt = selected then set it
    var currentSelected = $('select', this.element).find(':selected').val();
    if(currentSelected != this.selected) {           

            $('select', this.element).val(this.selected);
            $('select', this.element).trigger("chosen:updated");
    }
}

date.js

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
    import {activationStrategy} from 'aurelia-router';
    import $ from 'jquery';

@customElement('date')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})
@inject(Element)
export class Date {
    constructor(element) {
        this.element = element;
        this.pickerDate = '';
    }

    bind(){
        var options = {
            autoclose: true, 
            format: 'dd/mm/yyyy',
        };

        $('.input-group.date', this.element).datepicker(options).datepicker('update', this.value);

        $('.input-group.date', this.element).on('changeDate', (event) => {           
            this.value = $('.input-group.date', this.element).datepicker('getUTCDate');
        });
    }
}

**date.html**
<template>
    <div class="input-group date">
        <input type="text" class="form-control" disabled.bind="readonly" />
        <span class="input-group-addon"><i class="fa fa-calendar fa-lg"></i></span>
    </div>
</template>

Я на самом деле не front-end JS и т.д., так что не знаете, как называется его ожидание?

Answer 1

Обратите внимание, что мой объект @bindable (для поля ввода даты) - это вызов 'value', поэтому в конструкторе я добавил 'valueChanged()'

ПОЛНЫЙ КОД:

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';

@customElement('date')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})

@inject(Element)
export class Date {
    constructor(element) {
        this.element = element;
        this.pickerDate = '';
    }

    valueChanged() {
        var currentvalue = $('.input-group.date', this.element).val();

        if (currentvalue !== this.selected) {
            $('.input-group.date', this.element).datepicker('update', this.value);
        }
    }

    bind(){
        var options = {
            autoclose: true, 
            format: 'dd/mm/yyyy',
        };

        $('.input-group.date', this.element).datepicker(options).datepicker('update', this.value);    

        $('.input-group.date', this.element).on('changeDate', (event) => {           
            this.value = $('.input-group.date', this.element).datepicker('getUTCDate');
        });
    }
}