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/