动态创建的Knockout可观测对象未随绑定动态控件更新值

你的代码存在三个核心问题导致Knockout绑定失效：

1. 服务器端Razor与前端模板字符串冲突 #

@Html.Editor是服务器端渲染的Razor方法，会直接把你传入的@data_bind = "value: ${data.Id}Prop"原样输出为HTML的data-bind="value: ${data.Id}Prop"，不会替换${data.Id}为前端实际变量值。Knockout解析时会把${data.Id}Prop当作字面量属性名，找不到你在ViewModel里定义的对应可观测对象，绑定自然失效。

2. ViewModel方法定义顺序错误 #

你先实例化CustomFormViewModel，再给实例挂载createInput方法，但ViewModel构造函数里已经调用了self.createInput(data)，此时方法还未定义，会直接抛出错误，导致后续DOM添加和绑定无法执行。

3. 动态DOM绑定时机缺失 #

即使前两个问题修复，若动态添加DOM在ko.applyBindings之后，Knockout不会自动绑定新元素，需要手动触发局部绑定。

针对上述问题，分步骤修改代码：

步骤1：重构前端模板生成逻辑 #

放弃用Razor生成动态模板，改用纯前端字符串拼接或Knockout原生模板，确保data-bind属性能正确渲染为实际可观测对象名。

步骤2：调整ViewModel方法定义顺序 #

将createInput方法定义在ViewModel构造函数内部，避免构造函数调用未定义的方法。

步骤3：添加动态DOM的局部绑定 #

在动态DOM添加后，对新元素执行Knockout局部绑定。

修改后的完整代码示例： #

CustomViewModel.cs（无需修改）

public class CustomViewModel
{
     public int Id { get; set; }
     public int Prop { get; set; }
}

HTML（含Razor）

@model CustomViewModel

<div id="inputContainer"></div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval", "/Scripts/ViewModels/CustomFormViewModel.js")
    <script>
        var vm = new CustomFormViewModel(@HtmlHelperExtensions.HtmlConvertToJson(Html, Model));
        ko.applyBindings(vm);
    </script>
}

/Scripts/ViewModels/CustomFormViewModel.js

function CustomFormViewModel(initialData) {
    var self = this;

    // 定义可观测对象
    var observableName = `${initialData.Id}Prop`;
    self[observableName] = ko.observable(initialData.Prop);

    // 内部定义createInput方法，避免顺序问题
    self.createInput = function () {
        // 纯前端拼接输入框HTML，确保data-bind属性正确
        return `<input type="number" id="${observableName}" data-bind="value: ${observableName}" />`;
    };

    // 添加DOM到容器
    var newInput = self.createInput();
    var $inputContainer = $("#inputContainer");
    $inputContainer.append(newInput);

    // 对新添加的元素执行局部绑定
    ko.applyBindings(self, $inputContainer.find(`#${observableName}`)[0]);
}

推荐使用Knockout原生模板（template绑定）生成动态元素，无需手动拼接HTML和触发绑定，更可靠易维护：

<!-- 在HTML中定义模板 -->
<script type="text/html" id="propInputTemplate">
    <input type="number" data-bind="attr: { id: observableName }, value: $parent[observableName]" />
</script>

<!-- 容器改用template绑定 -->
<div id="inputContainer" data-bind="template: { name: 'propInputTemplate', data: { observableName: observableName } }"></div>

对应的ViewModel可简化为：

function CustomFormViewModel(initialData) {
    var self = this;
    self.observableName = `${initialData.Id}Prop`;
    self[self.observableName] = ko.observable(initialData.Prop);
}

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