Color picker value not binding with aurelia

Question

I am trying to use spectrum color picker in Aurelia. I've initialized the spectrum color picker in my project file like this

editBoard.js

import "spectrum-colorpicker";
@autoinject()
export class Read {
    board = {
          color:"#FFFFFF"
       };

    attached() {
        $("#colorpicker").spectrum();
    }
}

editBoard.html

<template>
    <require from="spectrum-colorpicker/spectrum.css"></require>
    <input type='text' id="colorpicker" value.two-way="board.color" />
    <div css="color : ${board.color};" style="width:100%; 
    height:100px;"></div>
</template>

when I load it, it is coming alright. The color picker is working well and it had picked up the color that I gave the input via the value.two-way="board.color" but the problem is that when I change the color from the color picker, only the input value is changed, the board.color value is not changed. Any reason why this is happening, are there any solutions for this issue?

Answer 1

I created a gist for a custom element wrapper for spectrum: https://gist.github.com/arabsight/cf9c588b60824eddd30f97accc634c17

you can use it like this:

<spectrum color.bind="board.color"></spectrum>

what you're missing in your code is listening to the change event of the picker and updating the value.