淘汰赛推送不更新 GUI答案

【问题标题】：knockout push not updating GUI淘汰赛推送不更新 GUI
【发布时间】：2012-11-06 15:24:58
【问题描述】：

当我将一个项目添加到 observableArray 时，我正在与淘汰赛作斗争并让 UI 也更新。初始列表和 deleteEmployee 工作正常并适当更新 UI，但是当我尝试添加员工时，UI 根本没有更新。下面是viewmodel和html。感谢我能得到的任何帮助。

ViewModel：

function viewModel() {
        var self = this;
        self.employees = ko.observableArray();

        self.deleteEmployee = function () {
            var employee = this;
            dataservice.del(this.id, function () {
                self.employees.remove(employee);
            })
        },

        self.addEmployee = function () {
            var emp = {};
            emp.Name = $("#newName").val();
            emp.Email = $("#newEmail").val();
            dataservice.add(emp, function (data) {
                var employee = new Employee(data.id, emp.Name, emp.Email);
                self.employees.push(employee);
            });
        }.bind(self);

        $.each(data.rows, function (index, row) {
            self.employees.push(new Employee(row.value.Id, row.value.Name, row.value.Email));
        });

        return {
            employees: self.employees,
            deleteEmployee: self.deleteEmployee,
            addEmployee: self.addEmployee
        }
    };

    ko.applyBindings(new viewModel());

HTML

<article data-bind="foreach: employees">
                <div class="emp">
                    <div class="empTop">
                        <span data-bind="text: name"></span>
                        <div class="del" data-bind="click: $parent.deleteEmployee, clickBubble: false"></div>
                    </div>
                    <div class="empContent">
                        <div class="row">
                            <label for="name">Name</label>
                            <input name="name" type="text" data-bind="value: name">
                        </div>
                        <div class="row">
                            <label for="name">Email</label>
                            <input name="email" type="text" data-bind="value: email">
                        </div>
                        <div class="row">
                            <input type="button" value="Update">
                        </div>
                    </div>
                </div>                 
            </article>

            <aside>
                <h3>Create</h3>
                <div>
                    <div class="row">
                        <label for="newName">Name</label>
                        <input id="newName" name="newName" type="text">
                    </div>
                    <div class="row">
                        <label for="newEmail">Email</label>
                        <input id="newEmail" name="newEmail" type="text">
                    </div>
                    <div class="row">
                        <input type="button" value="Create" data-bind="click: addEmployee">
                    </div>
                </div>
            </aside>

【问题讨论】：

顺便说一句。我没有收到任何错误或类似的东西。我遇到的唯一问题是 UI 没有更新。如果我在添加员工后刷新页面，它会正确显示在列表中
在我看来 dataservice.add 没有调用回调函数。您是否尝试调试它？是 self.employees.push(employee);函数调用？
是的 self.employees.push(employee);被调用并且员工对象包含正确的数据。
奇怪的是，带有 push() 的初始 $.each() 正确填充了所有内容，并且页面呈现为列出了我的所有员工。 remove 也可以正常工作并更新 ui，但是当调用 push() 时 addEmployee 什么也不做。我很困惑：S.
尝试在 addEmployee 函数中添加一个假员工： self.addEmployee = function () { self.employees.push(new Employee(1, "Test", "Test"); }. and test如果有效。

标签： knockout.js viewmodel

【解决方案1】：

看来，问题不在于淘汰赛。我将您的代码放入 JSFiddle，在 javascript 中注释掉了几行，但没有触及您的 HTML，并且创建工作正常。

看小提琴：http://jsfiddle.net/mshmelev/ZF5pC/

所以，问题可能是：

dataservice.add() 函数没有调用你的回调
你的 Employee 类有问题（我只是在小提琴中创建了一个存根）

【讨论】：

【解决方案2】：

原来是渲染的项目，但是，这很尴尬，我有一些 jquery 隐藏了添加 $('.emp').hide() 的元素。这个小错误让我困惑了好几个小时。谢谢你的所有建议。

【讨论】：