如何停止子div的Knockout绑定并将其绑定到另一模型？

嘿，我来帮你搞定这个Knockout绑定的问题！你已经用data-bind="stopBinding: true"让子div importDiv 脱离了父模型的绑定，现在要给它绑定新模型对吧？按下面的步骤来就行：

先回顾你的现有代码 #

视图代码 #

@model Horeko.Web.ViewModels.MyUpdateViewModel
<div id="main">
    <div>
        更多带数据绑定的嵌套div
        <div id="importDiv" data-bind="stopBinding: true">
            @Html.Partial("MyPartialView", Model.ImportSettings)
        </div>
    </div>
</div>

现有JavaScript代码 #

var myInfoModel = function (model) {
    var self = this;
    var mapping = {
        'include': ["desc", "name", "start", "end", "importSettings"],
        'copy': ["id"]
    };
    ko.mapping.fromJS(model, mapping, self);
    // ...其他逻辑
};

实现步骤 #

1. 准备新的子ViewModel实例 #

首先你需要定义好子视图对应的ViewModel（比如ImportViewModel），并传入新的初始化数据：

// 示例子ViewModel
var ImportViewModel = function(data) {
    var self = this;
    // 根据子视图的绑定需求定义属性
    self.importName = ko.observable(data.importName);
    self.isEnabled = ko.observable(data.isEnabled);
    // ...其他需要绑定的属性
};

// 准备新的初始化数据
var newImportData = {
    importName: "新的导入配置",
    isEnabled: true
    // ...对应的数据字段
};

// 创建新的模型实例
var newImportModel = new ImportViewModel(newImportData);

2. 清理子Div的原有绑定 #

如果你的MyPartialView之前已经通过父模型绑定过数据，一定要先清理掉原有绑定，避免冲突和内存泄漏：

var importDiv = document.getElementById('importDiv');
ko.cleanNode(importDiv);

3. 将新模型绑定到子Div #

最后调用ko.applyBindings，并指定绑定的根元素为importDiv，这样就只会把新模型绑定到这个子容器里，不会影响父级的绑定：

ko.applyBindings(newImportModel, importDiv);

完整整合后的示例代码 #

把逻辑整合到你的现有JS里，比如：

var myInfoModel = function (model) {
    var self = this;
    var mapping = {
        'include': ["desc", "name", "start", "end", "importSettings"],
        'copy': ["id"]
    };
    ko.mapping.fromJS(model, mapping, self);

    // 初始化新绑定的方法
    self.setupNewImportBinding = function() {
        // 1. 创建新模型
        var newImportData = {
            importName: "新导入配置",
            isEnabled: true
        };
        var newImportModel = new ImportViewModel(newImportData);

        // 2. 获取目标元素并清理原有绑定
        var importDiv = document.getElementById('importDiv');
        ko.cleanNode(importDiv);

        // 3. 绑定新模型
        ko.applyBindings(newImportModel, importDiv);
    };

    // 确保DOM加载完成后执行绑定（比如放在页面就绪事件里）
    document.addEventListener('DOMContentLoaded', function() {
        self.setupNewImportBinding();
    });
};

// 子ViewModel定义
var ImportViewModel = function(data) {
    var self = this;
    self.importName = ko.observable(data.importName);
    self.isEnabled = ko.observable(data.isEnabled);
};

关键注意点 #

• stopBinding: true的作用是让父级Knockout绑定跳过这个子元素，这一步你已经做对了，能避免父模型绑定影响子Div。
• 必须调用ko.cleanNode清理原有绑定，否则重复绑定会导致异常。
• 确保新ViewModel的属性和子视图MyPartialView里的绑定表达式完全匹配，不然会出现绑定失效的问题。

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