自定义元素中的Aurelia双向绑定不起作用
Aurelia two-way binding in custom element not working
尝试学习Aurelia 1.0,但我似乎无法在自定义元素上获得双向绑定。
使用bootstrap-datepicker,我创建了一个日期范围选择器自定义元素:
date-range-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();
}
}
date-range-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);
}
}
date-range-picker按预期工作,在leads.js中的startDate和endDate设置的任何值都正确地绑定到自定义元素中的输入框,但是当我提交表单时,startDate和endDate不会改变,即使我改变了输入框的值。
你知道我做错了什么吗?
这些值是由javascript更新的,所以你必须调度输入的更改事件,像这样:
attached() {
$(this.element).find('.input-daterange').datepicker()
.on('changeDate', e => {
e.target.dispatchEvent(new Event('change'));
});
}
下面是一个正在运行的示例https://gist.run/?id=5d047c561cf5973cf98e88bae12f4b4e
相关文章:
- 对象文字方法上的Javascript绑定不起作用
- Knockout输入绑定不起作用
- 角度指令双向绑定不起作用
- 指令中选择输入的双向绑定不起作用
- Angularjs:ui路由嵌套状态下的绑定不起作用
- 为什么我的淘汰选项绑定不起作用
- jQuery Ajax 元素的后期绑定不起作用
- 样式绑定不起作用
- 在内联编辑的情况下,Knockout绑定不起作用
- 指令链接中的绑定不起作用
- Angular 1.5组件双向绑定不起作用
- 点击处理程序多次触发,解除绑定不起作用
- KnockoutJS - 引导程序 3 模式绑定不起作用
- foreach:绑定不起作用 ko.mapping.fromJS 数据
- 虚拟元素的挖空绑定不起作用
- 委托的“模板”绑定不起作用
- Angularjs 双向数据绑定不起作用;$watch也不起作用
- 使用 D3js 时,带有 DOM 的 AngularJS 数据绑定不起作用
- 视频播放事件中的 Angular 2 路绑定不起作用
- 如果语句和挖空中的可见绑定不起作用