javascript - knockout : Can't edit item that was added to UI

Question

我成功地从本地 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">&times;</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">&times;</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>

Answer 1

目前，当您为新人命名时，您只是传递可观察的 this.firstNameToAdd() 的值，而不是创建 firstName 属性本身是一个可观察的..

你应该..

this.people.push({
    firstName: ko.observable(this.firstNameToAdd()),
    lastName: ko.observable(this.lastNameToAdd()),
    title: ko.observable(this.titleToAdd())
});

甚至更好 - 因为您已经有了一个 Item 类..

this.people.push(new Item(
    this.firstNameToAdd(),
    this.lastNameToAdd(),
    this.titleToAdd()
));

fiddle :http://jsfiddle.net/sskMG/1/