Aurelia 双向绑定(bind)文本字段不起作用

Question

双向绑定(bind)似乎不会更新 View ，除非您在文本字段中键入内容。所以我正在使用 Vanilla 日期选择器(罗马)。与大多数日期选择器一样，它会弹出一个日历来选择您的日期。

问题:

• 点击日期选择器中的日期后，它会正确放置文本框中的日期。但是，它不会更新双向绑定(bind)。但是，如果我在文本框中手动输入日期，则两个绑定(bind)都有效正确并反射(reflect)到 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>

日期范围选择器.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}