javascript - knockoutjs - 使用 hasFocus 订阅突出显示表格行

Question

我试图弄清楚当给定输入在该行中获得焦点时如何突出显示我的表行。我有一个 hasFocus observable，它有一个订阅函数，已经做了一些事情。但我认为我需要行索引，但不确定如何将该索引放入函数中。我确实找到了另一个 SO Q&A，它帮助我解决了一些问题，但不是全部。 Highlight table row using knockout.js

这是我的带有输入的行表(所有可观察的):

<tbody data-bind="foreach: items">
                <tr data-bind="css: { diffColor: $root.HighlightedRowIndex() == $index }">
                    <td><input type="text" data-bind="value: itemNo, insertPress: $index, deletePress: $index, hasFocus: invalidItemNum, selected: invalidItemNum, event: { blur: function(){ $parent.checkItemNo($data, $index); } }, attr: { name: 'sellerItems[' + $index() + '].itemNo', id: 'sellerItems_' + $index() + '__itemNo', tabindex: 4 + $index()}" class="form-control" /></td>
                    <td>
                        <input type="text" data-bind="value: qty, insertPress: $index, tabEnterPress: '#tallyEntry', hasFocus: qtyFocus, deletePress: $index, event: { blur: function(){ $parent.calcTotal($data); } }, attr: { name: 'sellerItems[' + $index() + '].qty', id: 'sellerItems_' + $index() + '__qty', tabindex: 5 + $index() }" class="form-control" />
                        <input type="hidden" data-bind="value: locCode, attr: { name: 'sellerItems[' + $index() + '].locationCode', id: 'sellerItems_' + $index() + '__locationCode' }" />
                    </td>
                    <td><input type="text" data-bind="value: price, attr: { name: 'sellerItems[' + $index() + '].retail', id: 'sellerItems_' + $index() + '__retail' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td>
                        <input type="text" data-bind="value: bro, attr: { name: 'sellerItems[' + $index() + '].brocCode', id: 'sellerItems_' + $index() + '__brocCode' }" class="form-control" readonly="readonly" tabindex="-1" />
                        <input type="hidden" data-bind="value: broID, attr: { name: 'sellerItems[' + $index() + '].brochureId', id: 'sellerItems_' + $index() + '__brochureId' }" />
                    </td>
                    <td><input type="text" data-bind="value: desc, attr: { name: 'sellerItems[' + $index() + '].itemDesc', id: 'sellerItems_' + $index() + '__itemDesc' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: total, attr: { name: 'sellerItems[' + $index() + '].total', id: 'sellerItems_' + $index() + '__total' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: seq, attr: { name: 'sellerItems[' + $index() + '].itemRow', id: 'sellerItems_' + $index() + '__itemRow' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                </tr>
            </tbody>

这是我的 KO 订阅，我想在其中突出显示这一行:

self.invalidItemNum.subscribe(function() {
  easyGlanceModel.bigItemNo(self.itemNo());
  easyGlanceModel.bigQty(self.qty());
  self.highlightedRowIndex(???)
});

Answer 1

如果没有大局观，就很难给出建议。我的建议是在创建项目时将索引传递给项目。将其添加为可观察对象，然后您可以引用 self.index ，它应该与父 items 中的索引匹配

我假设您使用 JSON 数据数组或类似数据填充 items，因此它应该像添加

一样简单

for (var i=0;i<data.length;i++){
    self.items.push(new itemViewModel({
        itemNo: data[i].itemNo,
        qty: data[i].qty,
        index: i
    }));
}

再次，我假设您构建的构造函数采用对象作为初始值。不管怎样，你明白了吗？