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和结束日期正确绑定到输入框自定义元素，但是当我提交形式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