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>

日期范围-picker.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

您可以调度input元素的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}

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

1 个答案: