更改数据时 Kendo ui 列表视图失去焦点

Question

我有一个带有模板的剑道 UI 列表视图，它根据基础数据有条件地隐藏元素。一个例子如下：

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
        <div>
          # if (Discontinued) { #
                Discontinued Product
          # } #
        </div>
    </div>
</script>

如果我修改底层数据源项以设置 Discontinued 使用以下代码：

data[index].set('Discontinued', true);    

如果索引是当前选定的项目，则该项目失去焦点并且不再被选中。

请参阅以下道场示例http://dojo.telerik.com/UlOze，从列表中选择一个项目，然后将其设置为已停止。

有没有人找到解决这个问题的方法/解决方法？

谢谢。

----------最终解决方案--------------

根据下面 dimodi 的回答，我将解决方案拼凑在一起。为此，dataSource 必须设置架构 -> 模型 -> id 属性。

第一次捕获当前选中的数据项：

      var selectedItem = $(listElement).find(".k-state-selected");
      var selectedDataItem = list.dataItem(selectedItem);

2nd：调用 .set 后重新查找数据项并设置 k-state-selected 类。这是必要的，因为列表组件正在重新生成 uid。

     if (selectedDataItem) {
        var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
        var uid = newSelectedItem.uid;
        jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
      }

我已经更新了原来的 dojo 来展示这个解决方案，以防它帮助其他人。

Answer 1

当数据项发生更改时，其对应的 ListView 项将重新呈现以应用更改。结果，选择会丢失，因为它是一个纯粹的视觉特征，不会在重新绑定中保持不变。您可以在使用 set() 之前检查是否选择了项目，然后通过将 k-state-selected 类应用于元素来手动恢复选择。