在knockout JS中绑定复杂模型

Question

我有以下 JSON 复杂对象。

{"User":
    {
    "$id":"2",
    "Id":0,
    "FirstName":null,
    "LastName":null,
    "Email":null,
    "EmailConfirmed":false,
    "PasswordHash":null,
    }
}

如何在knockout js中绑定这个对象。到目前为止，我已经使用类似这样的方法将属性与输入字段绑定。

<input required class="form-control" data-bind="value: User.FirstName" type="text" />

在淘汰赛中构建模型的功能。

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

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

当我调用JS提交时

var jsonData = ko.toJSON(userInfo);

Object jsonData 显示属性 like FirstName 为 null，但已写入公式值。对象 userInfo 以公式存储写入的值，我已经检查过了。

应该是这样的吗？

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

    function UserViewModel(user) {
        this.FirstName = ko.observable(user.FirstName);
        this.LastName = ko.observable(user.LastName);
        // other properties
    }

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

$(document).ready(function () {
        userInfo = new userModel();
        createUser();
        ko.applyBindings(userInfo);
    });

Answer 1

要使双向绑定起作用，您需要在视图模型上构建相同的可观察值层次结构。

或者，您可以使用 mapping plugin:

由于 User 也是一个可观察对象，您必须像这样更新您的绑定：

<input required class="form-control" data-bind="value: User().FirstName" type="text" />

由于 User 有很多属性，您可以从 with binding:

中受益

这是一个包含两个示例的 fiddle（有和没有父绑定）

var data = {
  "User": {
    "$id": "2",
    "Id": 0,
    "FirstName": "Joseph",
    "LastName": "Campbell",
    "Email": null,
    "EmailConfirmed": false,
    "PasswordHash": null,
  }
}

function UserViewModel(user) {
  this.FirstName = ko.observable(user.FirstName);
  this.LastName = ko.observable(user.LastName);
  // other properties
}

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

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

var userInfo = new userModel();
bindData(data);

ko.applyBindings(userInfo);

input {
  display: block;
  margin: 5px 0;
}

input[readonly] {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<form data-bind="with: User">
  <input type="text" data-bind="value: FirstName" />
  <input type="text" data-bind="value: LastName" />
</form>

Current values:
<input type="text" readonly data-bind="value: User().FirstName" />
<input type="text" readonly data-bind="value: User().LastName" />

在knockout JS中绑定复杂模型

Bind complex model in knockout JS

javascript

jquery

knockout-2.0

knockout.js