カスタム要素のAurelia双方向バインディングが機能しない

Question

Aurelia 1.0を学習しようとすると、カスタム要素の双方向バインディングが機能しないようです。

日付範囲-picker.js

import {bindable, bindingMode, inject} from 'aurelia-framework'; 
import $ from 'jquery'; 
import datepicker from 'bootstrap-datepicker'; 

@inject(Element) 
export class DateRangePicker { 
    @bindable startName = 'start'; 
    @bindable endName = 'end'; 
    @bindable startValue = null; 
    @bindable endValue = null; 

    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    $(this.element).find('.input-daterange').datepicker(); 
    } 
} 

日付範囲-picker.html

<template> 
    <div class="input-daterange input-group" id="datepicker"> 
    <input type="text" class="input-sm form-control" 
     name="${startName}" id="${startName}" 
     value.two-way="startValue" 
     placeholder="Start Date (mm/dd/yyy)" /> 
    <span class="input-group-addon">to</span> 
    <input type="text" class="input-sm form-control" 
     name="${endName}" id="${endName}" 
     value.two-way="endValue" 
     placeholder="End Date (mm/dd/yyy)"/> 
    </div> 
</template> 

：

私は日付範囲ピッカーのカスタム要素を作ったブートストラップ日付ピッカーを使用します

カスタム要素がleads.htmlで使用されています。

<div class="col-sm-12"> 
    <form role="form" class="form-inline" submit.delegate="search()"> 
    <div class="form-group"> 
     <date-range-picker 
     start-name="createdAtStartDate" start-value.two-way="startDate" 
     end-name="createdAtEndDate" end-value.two-way="endDate"> 
     </date-range-picker> 
    </div> 
    <button type="submit" class="btn btn-primary">Search</button> 
    </form> 
</div> 

leads.js

import {inject} from 'aurelia-framework'; 
import {LeadsService} from './leads-service'; 
import moment from 'moment'; 

@inject(LeadsService) 
export class Leads { 
    startDate = moment().format('M/D/YYYY'); 
    endDate = moment().format('M/D/YYYY'); 
    leads = []; 

    constructor(dataService) { 
    this.dataService = dataService; 
    } 

    search() { 
    this.dataService.getLeads({ 
     startDate: this.startDate, 
     endDate: this.endDate 
    }) 
    .then(leads => this.leads = leads); 
    } 
} 

日付範囲ピッカーの作品は予想通りとどのような値が正しくカスタム要素に入力ボックスにバインドされているleads.jsでたstartDateとendDateにに設定されているが、私は提出したときフォームのstartDateとendDateは、入力ボックスの値を変更しても変更されません。

私が間違っていることは何ですか？

Answer 1

値ではJavaScriptによって更新されているので、あなたはこのように、入力の変更イベントをディスパッチする必要があります。

ここ

attached() { 
    $(this.element).find('.input-daterange').datepicker() 
     .on('changeDate', e => { 
     e.target.dispatchEvent(new Event('change')); 
     }); 
    } 

がhttps://gist.run/?id=5d047c561cf5973cf98e88bae12f4b4e