Question

for (var i = 0; i < 9; i++)
{
   vm.icdCodes.push({Index:i, ID:'',DiagnosisCd: '' ,Description:ko.observable('')});
}

   <tbody data-bind='foreach: $root.icdCodes'>
       <tr>
         <td>
            <input type="text" class="icdCodeInput" list="icdcodes" data-bind="value: DiagnosisCd, event: { focusout: $root.dxCodeLostFocus}, attr: { id: 'icdCodeInput' + $index() }">
            <datalist id="icdcodes" class="icdcodes">
            </datalist>
            <button type="button" class="btn btn-default btn-lg"  data-bind=" click:    $root.moveDxCodeUp, attr: { id: 'dxCodeUpButton' + $index() }">
            <i class="icon-arrow-up"></i>
            </button>
          </td>
        </tr>
    </tbody>


 vm.moveDxCodeUp = function (data) {
        if (data.DiagnosisCd != "")
        {
            var currentDxCode = data;
            var previousDxCode = vm.icdCodes()[data.Index - 1];
            if (currentDxCode.Index > 0)
            {
                vm.icdCodes()[data.Index - 1] = currentDxCode;
                vm.icdCodes()[data.Index] = previousDxCode;

                var tempIndex = currentDxCode.Index;
                currentDxCode.Index = previousDxCode.Index;
                previousDxCode.Index = tempIndex;
            }
        }

在我的HTML中，我在icdCodes可观察数组中循环，以便在它旁边添加几个HTML 5 datalist和相邻按钮。单击该按钮允许我将当前文本框中的值移动到其上方的文本框中。第一次单击按钮时，值会正确交换。但是如果我再次点击按钮，movexCodeUp函数中的data参数仍然会获得原始值（在交换之前），而不是在按下按钮后互换的值。我还在函数中交换实际可观察集合（icdCodes）中的值。

Answer 1

即使您的icdCodes是ko.observableArray，因为您直接操纵基础数组来交换您的项目，KO也不会收到有关此更改的通知，因此它不会重新呈现视图。

要使其正常工作，您只需调用valueHasMutated函数即可通知KO您的阵列已更改：

vm.icdCodes()[data.Index - 1] = currentDxCode;
vm.icdCodes()[data.Index] = previousDxCode;
vm.icdCodes.valueHasMutated();

演示JSFiddle。

Knockout点击事件绑定发送错误数据

1 个答案: