我成功地从本地 JSON 数据创建了一个 observableArray 并在 UI 中创建了一个网格。我能够编辑这些项目，甚至添加（推送）一个新项目——我可以在 observableArray 中看到新项目，所以我知道它就在那里。我遇到的问题是，一旦它在数组中，我就无法编辑它。
这是我的 JS：
$(function () {
var dataFromServer = ko.utils.parseJson(JSONdataFromServer);
var shortUserArray = dataFromServer;
shortUserArray.length = 5;
console.log(shortUserArray);
function Item(firstName, lastName, title) {
this.firstName = ko.observable(firstName, { persist: firstName });
this.lastName = ko.observable(lastName, { persist: lastName });
this.title = ko.observable(title, { persist: title });
}
//do some basic mapping (without mapping plugin)
var mappedData = ko.utils.arrayMap(shortUserArray, function (item) {
return new Item(item.firstName, item.lastName, item.title);
});
var viewModel = function () {
var self = this;
// data
self.people = ko.observableArray(mappedData, { persist: 'people' }),
self.firstNameToAdd = ko.observable(""),
self.lastNameToAdd = ko.observable(""),
self.titleToAdd = ko.observable(""),
self.selectedPerson = ko.observable(null),
self.addPerson = function () {
this.people.push({
firstName: this.firstNameToAdd(),
lastName: this.lastNameToAdd(),
title: this.titleToAdd()
});
this.firstNameToAdd("");
this.lastNameToAdd("");
this.titleToAdd("");
},
self.selectPerson = function () {
viewModel.selectedPerson(this);
},
self.addOnEnter = function () {
var keyCode = (event.which ? event.which : event.keyCode);
if (keyCode === 13) {
viewModel.addPerson();
}
return true;
};
$(document).on("click", ".row-delete", function () {
var itemToRemove = ko.dataFor(this);
self.people.remove(itemToRemove);
});
};
ko.applyBindings(new viewModel());
});
// Custom binding to add an item to the list when the user presses enter
ko.bindingHandlers.executeOnEnter = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value;
value = void 0;
value = valueAccessor();
return $(element).keypress(function (event) {
var keyCode;
keyCode = void 0;
keyCode = (event.which ? event.which : event.keyCode);
if (keyCode === 13) {
value.call(viewModel);
return false;
}
return true;
});
}
};
...这是 HTML：
<div class="container">
<div class="row">
<div class="col-md-12">
<a data-toggle="modal" href="#addUser" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New User</a>
<button type="button" class="btn btn-default pull-right" onclick="localStorage.clear();"><span class="glyphicon glyphicon-refresh"></span> Clear Local Storage</button>
<hr />
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td data-bind="text: title"></td>
<td data-bind="click: $root.selectedPerson">
<a href="#editUser" role="button" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit User</a>
</td>
<td data-bind="click: $root.selectedPerson">
<a href="#" class="row-delete"><span class="glyphicon glyphicon-remove"></span> Delete User</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Add User Modal -->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="addUserLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add User</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" data-bind="value: firstNameToAdd, valueUpdate: 'afterkeydown'">
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" data-bind="value: lastNameToAdd, valueUpdate: 'afterkeydown'">
</div>
<div class="form-group">
<label for="job-title">Job Title</label>
<input type="text" class="form-control" id="job-title" data-bind="value: titleToAdd, valueUpdate: 'afterkeydown'">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-bind="click: addPerson, enable: firstNameToAdd().length > 0 && lastNameToAdd().length > 0 && titleToAdd().length > 0" data-dismiss="modal">Add User</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Edit User Modal -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="editUserLabel" aria-hidden="true" data-bind="with: selectedPerson">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="editUserLabel" data-bind="text: firstName" class="modal-title">Edit User</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="edit-first-name">First Name</label>
<input type="text" class="form-control" id="edit-first-name" data-bind="value: firstName" id="edit-first-name">
</div>
<div class="form-group">
<label for="edit-last-name">Last Name</label>
<input type="text" class="form-control" id="edit-last-name" data-bind="value: lastName" id="edit-last-name">
</div>
<div class="form-group">
<label for="edit-job-title">Job Title</label>
<input type="text" class="form-control" id="edit-job-title" data-bind="value: title" id="edit-job-title">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>