Aurelia 바인딩이있는 jQuery MiniColors 사용

Question

jQuery MiniColors 색상 선택 도구 (http://labs.abeautifulsite.net/jquery-minicolors/)가 Aurelia 데이터 바인딩에서 올바르게 작동하지 않는 것 같습니다.

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 값은 입력에 나타나지만 색상 선택기의 색상은 설정하지 않습니다.

2. 색 선택기 색을 변경하면 새 값이 입력에 나타나지만 바인딩 된 값인 calendar.cal_color는 업데이트되지 않습니다.

jQuery MiniColors는 입력 컨트롤의 value.bind 속성을 사용하고 있습니까? 다른 설명이 있습니까?

I 성공적 모델이 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(); 
    } 
}