Aurelia雙向綁定文本字段不起作用

Question

雙向綁定似乎不會更新視圖，除非您鍵入文本字段。所以我使用了香草日期選擇器（羅馬）。像大多數日期選擇器一樣，它彈出一個日曆來選擇你的日期。

問題：

• 一旦你從日期選擇器中點擊日期，將正確放置在文本框中 日期。但它不會更新雙向綁定。 但如果我手動文本框中鍵入日期兩個結合作品 正確並反映最多schedule.html

schedule.html

<template> 
    <require from="../../shared/components/date-range-picker"></require> 
    <require from="../../shared/components/time-range-picker"></require> 
    <div>${data.dateTime.openDate}</div> <!-- This doesn't update --> 
    <date-range-picker containerless date-range.two-way="data.dateTime"></date-range-picker> 
    <time-range-picker containerless time-range.two-way="data.dateTime"></time-range-picker> 
</template> 

日期範圍選取器html的

<template> 
    <div class="form-group input-button-group input-group date"> 
    <input type="text" class="form-control" id="open" value.bind="dateRange.openDate" class="form-control" 
     placeholder="Select a Start Date" /> 
    <span class="input-group-addon"><i class="icon-ion-calendar"></i></span> 
    </div> 
    <div class="form-group input-button-group input-group date"> 
    <input type="text" class="form-control" id="close" value.bind="dateRange.closeDate" class="form-control" 
     placeholder="Select a Close Date" /> 
    <span class="input-group-addon"><i class="icon-ion-calendar"></i></span> 
    </div> 
</template> 

日期範圍-picker.js

import { bindable, bindingMode } from 'aurelia-framework'; 
import rome from 'rome'; 
import 'rome/dist/rome.css'; 

export class DateRangePicker { 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) dateRange; 

    attached() { 
    const open = document.getElementById('open'); 
    const close = document.getElementById('close'); 

    rome(open, { 
     time: false, 
     dateValidator: rome.val.beforeEq(close), 
    }); 

    rome(close, { 
     time: false, 
     dateValidator: rome.val.afterEq(open), 
    }); 
    } 
} 

Answer 1

您可以調度輸入元素的change事件。我已經使用customAttribute完成了此操作，但仍然可以使用customElements。就像這樣：

rome.js

import {inject} from 'aurelia-dependency-injection'; 
import {customAttribute} from 'aurelia-templating'; 

@inject(Element) 
@customAttribute('rome') 
export class Rome { 

    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    let picker = rome(this.element); 
    picker.on('data',() => { 
     this.element.dispatchEvent(new Event('change')); 
    }); 
    } 
} 

使用

<require from='./rome'></require> 

<input type="text" rome value.bind="selectedDate"> 
${selectedDate}