我在这个 jsFiddle 中有以下代码。
我遇到的问题是我的子项目没有正确更新。
我可以在出现问题时单击“编辑用户”并查看数据更改,但是当我尝试添加注释或即使我要编写编辑注释功能时,数据也无法正确绑定
<ul data-bind="foreach: Users">
<li>
<span data-bind="text: Name"></span>
<div data-bind="foreach: notes">
<span data-bind="text: text"></span>
<a href="#" data-bind="click: $parent.editNote">Edit Note</a>
</div>
<a href="#" data-bind="click: $parent.addNote">Add Note</a>
<a href="#" data-bind="click: $parent.EditUser">Edit user</a>
</li>
</ul>
<div id="userModal" data-bind="with: EditingUser" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing user</h3>
</div>
<div class="modal-body">
<label>
Name:</label>
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div id="addJobNoteModal" data-bind="with: detailedNote" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing Note</h3>
</div>
<div class="modal-body">
<label>
Text:</label>
<input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Save changes</a>
</div>
</div>
function Note(text) {
this.text = text;
}
var User = function(name) {
var self = this;
self.Name = ko.observable(name);
this.notes = ko.observableArray([]);
}
var ViewModel = function() {
var self = this;
self.Users = ko.observableArray();
self.EditingUser = ko.observable();
self.detailedNote = ko.observable();
self.EditUser = function(user) {
self.EditingUser(user);
$("#userModal").modal("show");
};
this.addNote = function(user) {
var note= new Note("original")
self.detailedNote(note);
$("#addJobNoteModal").find('.btn-warning').click(function() {
user.notes.push(note);
$(this).unbind('click');
});
$("#addJobNoteModal").modal("show");
}
for (var i = 1; i <= 10; i++) {
self.Users.push(new User('User ' + i));
}
}
ko.applyBindings(new ViewModel());