javascript - 颜色选择器值不与 aurelia 绑定(bind)

Question

我正在尝试在 Aurelia 中使用光谱颜色选择器。我已经在我的项目文件中初始化了光谱颜色选择器，如下所示

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>

当我加载它时，它就正常了。颜色选择器运行良好，它已经拾取了我通过 value.two-way="board.color" 输入的颜色。但问题是，当我从颜色选择器更改颜色时，仅更改输入值，即 board.color值没有改变。发生这种情况的原因是什么，这个问题有什么解决方案吗？

Answer 1

我为频谱的自定义元素包装器创建了要点:https://gist.github.com/arabsight/cf9c588b60824eddd30f97accc634c17

你可以这样使用它:

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

您的代码中缺少的是监听选择器的更改事件并更新值。