Javascript 自定义元素中的Aurelia双向绑定不起作用

试图学习Aurelia 1.0，我似乎无法在自定义元素上实现双向绑定

使用bootstrap datepicker，我创建了一个日期范围选择器自定义元素：

date-range-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();
  }
}

date-range-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.js中在startDate和endDate设置的任何值都会正确绑定到自定义元素中的输入框，但是当我提交表单startDate和endDate时，即使我更改了输入框的值，也不会更改

---

你知道我做错了什么吗？

javascript正在更新这些值，因此你必须发送输入的更改事件，如下所示：

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

---

下面是一个运行示例

我实际上先尝试了，但仍然得到了相同的结果。我更改了startValue和endValue以指定您所说的defaultBindingMode，但仍然不起作用。我尝试不使用自定义元素，只使用输入文本框和双向绑定。它似乎不适用于自定义元素。我不确定它是否会有任何区别，但请尝试从可绑定声明中删除“=null”<代码>@bindable（{defaultBindingMode:bindingMode.twoWay}）startValue；//此处no=null不幸的是，即使删除“=null”后，双向绑定仍然无法工作<代码>@bindable（{defaultBindingMode:bindingMode.twoWay}）startValue哦，我知道为什么，javascript正在更新该值。您必须听一些“change”方法，然后调用this.element.dispatchEvent。当我有时间的时候，我会写一个例子，它是Fabio的！谢谢好的，为了理解发生了什么，引导选择器javascript就是更新从leads视图模型绑定到startValue的输入框的那个。但是因为是javascript代码，所以没有触发双向绑定的更改事件？

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);
  }
}

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