Aurelia двусторонняя привязка в пользовательском элементе не работает

Question

Попытка узнать Aurelia 1.0, и я не могу получить двустороннюю привязку к настраиваемому элементу для работы.

Используя самозагрузки-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> 

пользовательский элемент используется в свинцах.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); 
    } 
} 

дата-диапазона Picker работает, как ожидалось, и любое значение устанавливается в STARTDATE и ENDDATE в leads.js правильно связан с полей ввода в пользовательском элементе, но, когда я представляю Форма 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