1

このjsFiddleには次のコードがあります。

私が抱えている問題は、子アイテムが正しく更新されないことです。

問題が発生した場合は [ユーザーの編集] をクリックしてデータが変更されるのを確認できますが、メモを追加しようとしたり、メモの編集機能を記述しようとしても、データが正しくバインドされません。

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

2 に答える 2

1

これを変える：

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

これに：

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

あなたは間違ったボタンをターゲットにしていました:)

于 2012-05-18T04:27:19.130 に答える
0

結局、問題は、フォーム入力/テキストエリアで「テキスト:」ではなく「値:」にバインドする必要があることだと思います。

于 2012-05-18T14:07:49.967 に答える