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}