如何在Knockout.js中实现点击刷新视图？现有代码失效求修复

刚接触Knockout.js很容易踩这个坑——手动调用ko.cleanNode和ko.applyBindings重复绑定元素其实是Knockout的反模式，这也是你代码失效的核心原因。

Knockout的设计逻辑是「数据驱动视图」，当你修改observable数据时，视图会自动更新，根本不需要手动重新绑定。手动清理和重复绑定会破坏Knockout内部的订阅关系，导致内存泄漏或者绑定混乱，反而让视图无法正常更新。

修复方案：用数据驱动替代手动绑定 #

修复思路很简单：把你的数据逻辑改成基于observable的，点击事件只需要更新数据，视图会自动刷新。举个具体的例子：

1. 调整ViewModel逻辑，用observable存储数据 #

确保getProp返回的是observable对象（而非静态数据），点击事件只负责更新数据：

function RowViewModel() {
    const self = this;
    
    // 用observable存储col1的动态数据，初始值按需设置
    self.col1Data = ko.observable({ content: "初始内容" });
    
    // getProp返回对应的observable
    self.getProp = function(propName) {
        return propName === "col1" ? self.col1Data : null;
    };
    
    // 点击行时的刷新逻辑：仅更新observable数据
    self.refreshRow = function(data, event) {
        // 模拟获取新数据（比如接口请求、本地计算）
        const newData = { content: "点击刷新后的内容" };
        // 更新observable，Knockout会自动同步视图
        self.col1Data(newData);
    };
}

// 初始化绑定（只需要执行一次！）
ko.applyBindings(new RowViewModel());

2. 简化HTML绑定，移除手动绑定逻辑 #

HTML只需要绑定点击事件到刷新方法，不需要任何手动清理/重新绑定操作：

<tr data-bind="click: refreshRow">
    <!-- ko with: getProp("col1") -->
        <td data-bind="text: ko.computed(function() { 
            // 计算逻辑必须依赖observable属性（比如this.content()）
            return this.content(); 
        })"></td>
    <!-- /ko -->
</tr>

关键注意点 #

• ko.computed必须正确追踪依赖：计算函数里访问的必须是observable的属性（要加括号调用，比如this.content()而非this.content），这样数据变化时computed才会自动重新计算。
• 永远不要在已绑定的元素上重复调用ko.applyBindings，这是Knockout开发的大忌。如果需要切换视图上下文，用if、visible或者with绑定动态控制即可。

如果你的场景确实需要完全替换绑定（比如动态加载的内容），正确做法是先把元素从DOM中移除，清理绑定后再重新添加并绑定，但这属于特殊情况，优先用数据驱动的方式解决。

内容的提问来源于stack exchange，提问作者DZN