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