javascript - knockout - foreach : Change button color on click

Question

我有一个表格，列出了可观察数组中的元素。我遇到困难的是，当单击按钮时，按钮会更改颜色并更改为“选定”的值，如果再次单击按钮，则会反转。作为测试，我已成功将按钮文本颜色绑定(bind)到当前有效的 $data 中的属性。当我单击并更改属性值时，没有任何反应。

问题出在按钮标签上。

示例代码:

<tbody data-bind="foreach: slcs ">
<tr>
    <td data-bind="text: slc"></td>
    <td>
        <div class="form-group">
            <select class="form-control input-sm runinputs" data-bind="selectedOptions: $data.pbr, optionsCaption: 'Choose'">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </td>
    <td>
        <div class="form-group">
            <select class="form-control input-sm runinputs" data-bind="selectedOptions: $data.of, optionsCaption: 'Choose'">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </td>
    <td>
        <div class="form-group">
            <select class="form-control input-sm runinputs" data-bind="selectedOptions: $data.lotsize, optionsCaption: 'Choose'">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </td>
    <td><button class="btn btn-sm btn-info" data-bind="click: $data.status = 0,  click: function() { $parent.selectSetting($data); }, style: { color: $data.status = 0 ? 'red' : 'black' }">Select</button></td>
</tr>

Answer 1

我不知道你的父模型是什么样的，或者 selectSetting 应该完成什么，但我确实注意到了

<button class="btn btn-sm btn-info" data-bind="click: $data.status = 0,  click: function() { $parent.selectSetting($data); }, style: { color: $data.status = 0 ? 'red' : 'black' }">

您的第一次点击绑定(bind)将项目的状态设置为0，但不会切换它。所以这是一个问题。

另一个问题是在 style 部分，其中有 = 而不是 ==。