当顶级变量更改时，JSViews 双向绑定更新内部数组

Question

我正在尝试将此淘汰代码转换为 JSViews：here

我可以让它在第一次迭代中工作，但是单击颜色不会更新数组，因此不会添加“js-active”类。我知道原因是因为我没有观察到这种变化，但我似乎看不出如何将两者联系起来。

我已将两个单独的 ko.observbles 合并为一个：

var colorPickerData = {
selectedColor: "Red",

materialColors: [
    {
        color: "Red",
        variations: [
            {
                weight: 50,
                hex: "#FFEBEE"
....

这是模板：

 <script id="color-picker-template" type="text/x-jsrender">
    <div class="material-color-picker">
        <div class="material-color-picker__left-panel">
            <ol class="color-selector"> 
                {^{for materialColors ~paletteColor=selectedColor }}
                <li>
                    <input name="material-color" type="radio" data-link="id{:'materialColor' + #getIndex() } checked{:~paletteColor} value{:color}">
                    <label data-link="for{:'materialColor' + #getIndex()} title{:color} css-color{:variations[4].hex }"></label>
                </li>
                {{/for}}
            </ol>
        </div>
        <div class="material-color-picker__right-panel">
           {^{for materialColors ~paletteColor=selectedColor}}
            <div data-link="class{:(color == ~paletteColor)? 'js-active color-palette-wrapper': 'color-palette-wrapper' }">

                <h5 class="color-palette-header" data-link="text{:color}"></h5>
                <ol class="color-palette">
                    {^{for variations}}
                    <li id="clipboardItem" class="color-palette__item" data-link="data-clipboard-text{:hex } css-background-color{:hex }">
                        <span data-link="text{:weight}"></span>
                        <span data-link="text{:hex}"></span>

                    </li>
                    {{/for}}
                </ol>

            </div>
            {{/for}}
        </div>
    </div>

这里是链接代码：

$.templates("#color-picker-template").link("#color-wrapper", colorPickerData, true);

谁能告诉我如何观察 selectedColor 的变化？

Answer 1

我 fork 你的 CodePen here 并完成了到 JsViews 的移植。

我简化了一些数据链接标记，以减少不必要的数据绑定的性能成本。

关于双向绑定到单选按钮的问题：

你可以的

{^{radiogroup selectedColor}}
  {{for materialColors}}
    <li>
        <input name="material-color" id="materialColor{{:#index}}" value="{{:color}}" type="radio" />
        <label ...></label>
    </li>
  {{/for}}
{{/radiogroup}}

或

{{for materialColors ~paletteColor=selectedColor}}
  <li>
    <input name="material-color" id="materialColor{{:#index}}" value="{{:color}}" type="radio" data-link="~paletteColor"/>
    <label ...></label>
  </li>
{{/for}}

或者 - 如果您保留完整的数据链接方法：

<input name="material-color" type="radio" data-link="id{:'materialColor' + #getIndex() } value{:color} {:~paletteColor:}">

请参阅 {{radiogroup}} 和 Data-linked radio buttons。