我有以下 JSON 复杂对象。
{"User":
{
"$id":"2",
"Id":0,
"FirstName":null,
"LastName":null,
"Email":null,
"EmailConfirmed":false,
"PasswordHash":null,
}
}
如何在knockout js中绑定(bind)这个对象。到目前为止,我已经使用类似的方法将属性与输入字段绑定(bind)。
<input required class="form-control" data-bind="value: User.FirstName" type="text" />
在 knockout 中构建模型的功能。
function userModel() {
var self = this;
self.User = ko.observable();
}
function bindData(data) {
userInfo.User(data["User"]);
}
当我通过 JS 调用提交时。
var jsonData = ko.toJSON(userInfo);
Object jsonData 显示像 FirstName 这样的属性为空,但公式中的值已被写入。 对象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);
});
最佳答案
要使双向绑定(bind)发挥作用,您需要在 View 模型上构建相同的可观察值层次结构。
或者,您可以使用 mapping plugin :
由于 User 也是可观察的,因此您必须像这样更新绑定(bind):
<input required class="form-control" data-bind="value: User().FirstName" type="text" />
由于用户有很多属性,您可以从 with binding 中受益:
这是两个示例的 fiddle (有和没有父绑定(bind))
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" />
关于javascript - 在knockout JS中绑定(bind)复杂模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48562464/