奧裏利亞定製元素日期 - I創建的自定義元件（date.html/date.js）上更新

Question

漂亮的日期選擇器更新值。如果我在編輯頁面上使用它，這是非常有效的。它已經綁定的對象（選擇的值=「」），那麼它返回從DB一個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'); 
     }); 
    } 
}