Question

I have the following code in this jsFiddle.

The problem I’m having is that my child items do not update properly.

I can Click “Edit User” with a problem and see the data changing, but when I attempt to add a note or even if I were to write an edit note function, the data does not bind properly

http://jsfiddle.net/jkuGU/10/

<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());​

Answer 1

Change this:

        $("#addJobNoteModal").find('.btn-warning').click(function() {

To this:

        $("#addJobNoteModal").find('.btn-primary').click(function() {

You were targetting the wrong button 🙂