2

observableArray に項目を追加すると、ノックアウトと UI の更新に苦労しています。最初のリストと deleteEmployee は正常に機能し、適切に UI を更新しますが、従業員を追加しようとすると UI が更新されません。以下はビューモデルとhtmlです。これについて私が得ることができる助けに感謝します。

ビューモデル:

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>
4

2 に答える 2

1

問題はノックアウトではないようです。私はあなたのコードを JSFiddle に入れ、javascript で数行をコメントアウトしましたが、HTML には触れていませんでした。作成は正常に機能しています。

フィドルを見てください：http://jsfiddle.net/mshmelev/ZF5pC/

したがって、問題は次のようになります。

  1. dataservice.add()関数がコールバックを呼び出していません
  2. あなたのクラスに何か問題がありますEmployee(フィドルでスタブを作成しただけです)
于 2012-11-06T21:00:27.133 に答える
0

アイテムがレンダリングされることがわかりましたが、これは恥ずかしいことです。$('.emp').hide() を追加する要素を隠していた jquery がいくつかありました。このちょっとしたミスのせいで、何時間も混乱してしまいました。すべての提案に感謝します。

于 2012-11-07T06:58:48.547 に答える