aureliaバインディングでjQuery MiniColorsを使用する

Question

何らかの理由で、AureliaデータバインディングでjQuery MiniColorsカラーピッカー（http://labs.abeautifulsite.net/jquery-minicolors/）が正しく動作しないようです。

calendar.html（テンプレート）：

<!-- src/settings/school/calendars --> 
<template> 
    <require from="jquery-minicolors/jquery.minicolors.css"></require> 
    <form> 
    <div class="form-group"> 
     <label class="control-label" for="cal_name_orig"><span t="Calendar_name"></span></label> 
     <input type="text" class="form-control" ref="cal_name_orig" value.bind="calendar.cal_name_orig & validate" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="cal_color"><span t="Color"></span></label> 
     <input type="text" id="cal_color" class="form-control" value.bind="calendar.cal_color"> 
    </div> 
    </form> 
</template> 

そして、私のcalendar.js（ビューモデル）

//src/settings/school/calendars.js 
import 'jquery-minicolors'; 

export class SettingsSchoolCalendars { 

    error = null; 
    selectedId = null; 
    calendar = {}; 

    attached() { 
    var self = this; 
    // set focus when modal is shown 
    $("#cal_color").minicolors({ 
     control: "wheel", 
     theme: "bootstrap", 
    }); 
    } 
} 

形でのコントロールの動作が、二つがありますバインディングに関する問題：

1. calendar.cal_colorの値は入力に表示されますが、カラーピッカーの色は設定されません。

   カラーピッカーの色を変更すると、新しい値が入力に表示されますが、バインドされた値calendar.cal_colorは更新されません。

jQuery MiniColorsは入力コントロールのvalue.bindプロパティを使いこなしていますか？別の説明がありますか？

私は成功したモデルがMiniColorsのインスタンスにこれを追加することによって更新するために得ることができます：

change: function(hex, opacity) { 
    self.calendar.cal_color = hex; 
    } 

をしかし、私は反対のことを行うように見えることはできません（MiniColorsコントロールを更新したときにモデルの変更）。それでも、初期の色は正しく読み込まれません。

ヘルプ！

Answer 1

私はこのコントロールに問題がないようです。私はちょうどそれと遊んだ。私のHTMLで

、私はこれを持っている：

color = '#ff6161'; 

最後に、私の添付のコールバックで、私はref'd要素を使用します：私はデフォルトの色を設定すると

<input type="text" ref="minicolors" value.bind="color" class="form-control" id="color"> 
<div>Color: ${color}</div> 

attached() { 
    $(this.minicolors).minicolors({ 
    change: (value, opacity) => { 
     this.color = value; 
    } 
    }); 
} 

期待どおりに機能しています。

編集： 私は最終的にこのすべてを披露する要旨を作成する暇：https://gist.run/?id=6e4a6ea77751ae9c69b178eb51105137

app.html

<template> 
    Control value: ${controlValue} 
    <form> 
     <div class="form-group"> 
      <test></test> 
      <label for="color">Color</label> 
      <input type="text" value.bind="colorInfo.color" class="form-control" id="color"> 
     <div>Color: ${colorInfo.color}</div> 
     </div> 
     <div class="form-group"> 
      <test></test> 
      <label for="color">Color</label> 
      <input type="text" ref="minicolors" value.bind="colorInfo.color" class="form-control" id="color"> 
     <div>Color: ${colorInfo.color}</div> 
     </div> 
    </form> 
</template> 

app.js

import {inject, BindingEngine} from 'aurelia-framework'; 

@inject(BindingEngine) 
export class App { 
    colorInfo = { 
    color: '#ff6161' 
    } 

    constructor(bindingEngine) { 
    this.subscription = bindingEngine.propertyObserver(this.colorInfo, 'color') 
     .subscribe(() => { 
     this.widget.minicolors('value', this.colorInfo.color); 
     }); 
    } 

    attached() { 
    this.widget = $(this.minicolors); 
    this.widget.minicolors({ 
     change: (color, opacity) => { 
     this.colorInfo.color = color; 
     this.colorInfo.opacity = opacity; 
     } 
    }); 
    } 

    get controlValue() { 
    if(this.widget) { 
     return this.widget.minicolors('value'); 
    } 
    return ''; 
    } 

    detached() { 
    subscription.dispose(); 
    } 
}