Knockout JS绑定复杂User JSON对象后提交值为空问题求助

你遇到的核心问题是：你的User observable里存储的是一个普通JavaScript对象，而非Knockout可追踪的observable属性集合。Knockout的双向绑定依赖observable类型来追踪数据变化，普通对象的属性没有这种通知机制——所以你在输入框输入的值并没有真正同步回User对象，ko.toJSON自然输出的还是初始的null值。

方式一：手动构建带Observable属性的User模型 #

这种方式适合需要自定义逻辑或不想引入额外插件的场景：

1. 首先定义User实体构造函数，把每个需要绑定的属性都声明为observable：

function User(data) {
    var self = this;
    // 用传入的数据初始化，无数据时设默认值
    self.Id = ko.observable(data?.Id || 0);
    self.FirstName = ko.observable(data?.FirstName || null);
    self.LastName = ko.observable(data?.LastName || null);
    self.Email = ko.observable(data?.Email || null);
    self.EmailConfirmed = ko.observable(data?.EmailConfirmed || false);
    self.PasswordHash = ko.observable(data?.PasswordHash || null);
}

2. 修改你的主模型，初始化User为User类的实例：

function userModel() {
    var self = this;
    // 初始化为空的User实例，避免绑定时报错
    self.User = ko.observable(new User(null));
}

// 实例化模型
var userInfo = new userModel();
ko.applyBindings(userInfo);

3. 调整数据绑定函数，将后端返回的普通对象转换为User实例：

function bindData(data) {
    userInfo.User(new User(data["User"]));
}

4. 优化输入框绑定（推荐用with绑定简化语法并避免空值报错）：

<div data-bind="with: User">
    <input required class="form-control" data-bind="value: FirstName" type="text" />
    <input required class="form-control" data-bind="value: LastName" type="text" />
    <!-- 其他属性输入框同理 -->
</div>

方式二：使用Knockout Mapping插件自动转换 #

如果你的User结构复杂或经常变动，用knockout.mapping插件可以自动把普通JS对象转为带observable属性的对象，省去手动写构造函数的麻烦：

1. 先引入knockout.mapping脚本（确保在Knockout之后引入）。

2. 保持主模型不变，修改数据绑定函数：

function userModel() {
    var self = this;
    self.User = ko.observable();
}

var userInfo = new userModel();
ko.applyBindings(userInfo);

function bindData(data) {
    // 用mapping插件自动转换普通对象为observable集合
    var mappedUser = ko.mapping.fromJS(data["User"]);
    userInfo.User(mappedUser);
}

3. 同样可以用with绑定简化输入框的写法，和方式一的HTML代码一致。

当你输入内容后，执行var jsonData = ko.toJSON(userInfo);，就能看到FirstName等属性已经正确更新为你输入的值了——因为现在这些属性都是Knockout能追踪的observable，双向绑定的同步逻辑能正常工作。

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