Aurelia.io:自定义属性的选项

Question

我在aurelia.io项目中使用jquery daterangepicker (http://www.daterangepicker.com/)。

import {inject, bindable, customAttribute} from 'aurelia-framework';
import 'bootstrap-daterangepicker';
import $ from 'jquery';

@customAttribute('daterange')
@inject(Element)
export class DateRangePicker {
 constructor(element) {
    this.element = element;
 }
 attached() {
$(this.element).daterangepicker()
  .on('change', e => fireEvent(e.target, 'input'));

}

detached() {
$(this.element).daterangepicker('destroy')
  .off('change');
}
}

function createEvent(name) {
var event = document.createEvent('Event');
event.initEvent(name, true, true);
return event;
}

function fireEvent(element, name) {
var event = createEvent(name);
element.dispatchEvent(event);
}

如何将html文件中daterangepicker的选项提交给自定义属性？

Answer 1

datePickerCustomElement.js

import { bindable } from 'aurelia-framework';

export class DatePickerCustomElement {

  @bindable optionA;

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

  bind() {
    this.optionA = this.optionA || this.element.getAttribute('optionA');
  }
}

app.html

<date-picker optionA="12"></date-picker>
<date-picker optionaA.bind="optionAValue"</date-picker>

我在这里写了一个非常详细的关于实现这一点的模式的博客：http://davismj.me/blog/semantic-custom-element/