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

Question

正在尝试学习 Aurelia 1.0，但我似乎无法在自定义元素上进行双向绑定。

使用 bootstrap-datepicker 我制作了一个日期范围选择器自定义元素：

日期范围-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);
  }
}

date-range-picker 按预期工作并且在 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

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

Aurelia two-way binding in custom element not working

javascript

bootstrap-datepicker

aurelia