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/

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

1 个答案: