aurelia пользовательский элемент date - nifty datepicker значение обновления при обновлении

Question

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

У меня возникла проблема с другим настраиваемым элементом, который я создал (выпадающим списком), я решил проблему, добавив «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> 

Я на самом деле не передний конец JS и т.д., так что не знаю, что зовут его ждет?

Answer 1

Пожалуйста, обратите внимание, мой @bindable объект (для ввода даты) является вызов «значение» поэтому под конструктору я добавил «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'); 
     }); 
    } 
}