javascript - 添加 ajax 后， knockout 可观察数组未更新

Question

我有一个复杂对象的可观察数组。初始加载很好，所有预期数据看起来都很好。现在我正在致力于将新项目发布到该数组。注意:可观察数组是通过 ASP.NET ajax web api 调用加载的。

就将新项目保存到数据库而言，发布新项目工作正常，但我的 DOM 没有更新新项目，我不知道我错过了什么。

这是整个 ViewModel

    function ClientList() {
    //data
    var self = this;
    self.initialized = ko.observable(false);
    self.clients = ko.observableArray();
    self.userId = ko.observable("");
    self.name = ko.observable("");
    self.logo = ko.observable("");
    self.projects = ko.observableArray();
    self.clientAddress = ko.observableArray();


    self.addClient = function () {
        var client = {
            UserId: self.userId,
            Name: self.name,
            Logo: self.logo,
        }
        client = ko.toJSON(client);
        lucidServer.addClient(client);
        self.clients.push(client);
    }.bind(self);

    (function () {
        $.ajax({
            url: lucidServer.getClients(1),
            success: function (data) {
                ko.mapping.fromJS(data, {}, self.clients);
                self.initialized(true);
            }
        });
    })();
};

function IncompleteStoriesList() {
    //data
    var self = this;
    self.initialized = ko.observable(false);
    self.stories = ko.observableArray();
    (function () {
        $.ajax({
            url: lucidServer.getIncompleteStory(1),
            success: function (data) {
                ko.mapping.fromJS(data, {}, self.stories);
                self.initialized(true);
            }
        });
    })();
};


function ViewModel() {
    var self = this;
    self.clientList = new ClientList();
    self.storyList = new IncompleteStoriesList();
}

ko.applyBindings(new ViewModel());

这是我执行 POST 的特定片段(在 ClientList() 函数中)。

self.addClient = function () {
        self.client = {
        UserId: self.userId(),
        Name: self.name(),
        Logo: self.logo(),
        }
    //make client object to send to server
    var client = ko.toJSON(self.client);
    lucidServer.addClient(client);
    //push the self.client to the observablearray of clients
    self.clients.push(self.client);
}.bind(self);

我验证了它是位于客户端变量中的 JSON，并且没有抛出任何错误消息，所以我很困惑。在我添加一个项目并刷新整个页面后，它将显示在列表中。

编辑:这里是相关的 html:

<form data-bind="submit: clientList.addClient">
    <div>
        <label>userId</label>
        <input type="text" data-bind="value: clientList.userId" />
    </div>
    <div>
        <label>name</label>
        <input type="text" data-bind="value: clientList.name" />
    </div>
    <div>
        <label>logo</label>
        <input type="text" data-bind="value: clientList.logo" />
    </div>
    <button type="submit">Add</button>

    </form>

    <!-- ko ifnot: clientList.initialized -->
    <span>Loading...</span>
    <!-- /ko -->
    <ul data-bind="template:{name: 'clientList', foreach:clientList.clients}">
    </ul>

外部模板如下所示:

<div id="clientListOutput">

    <li><span data-bind="text: name"></span>
        <div data-bind="template: {foreach: clientAddress}">
            <span data-bind="text: city"></span>
            <span data-bind="text: state"></span>
        </div>
        <hr />
        <ul data-bind="template: {foreach: projects}">
            <li>
                <span data-bind="text: name"></span>
                <span data-bind="text: summary"></span>
                <span data-bind="text: description"></span>
            </li>
        </ul>
    </li>

Answer 1

我很确定您的 HTML 中有拼写错误。这是一个使用 ko.observablearray 的工作示例

HTML:

<form data-bind="submit: addItem">
    prop1: <input data-bind='value: prop1, valueUpdate: "afterkeydown"' />
    prop2: <input data-bind='value: prop2, valueUpdate: "afterkeydown"' />
    <button type="submit">Add</button>
    <p>Your items:</p>
    <div data-bind="foreach: items">
        <span data-bind="text: prop1"></span> &nbsp - &nbsp
        <span data-bind="text: prop2"></span>
        <br />
    </div>
</form>

JS:

var SimpleListModel = function() {
    this.items = ko.observableArray();
    this.prop1 = ko.observable("");
    this.prop2 = ko.observable("");
    this.addItem = function() {
        this.items.push({prop1:this.prop1, prop2: this.prop2});
    }.bind(this);  // Ensure that "this" is always this view model
};

ko.applyBindings(new SimpleListModel());

http://jsfiddle.net/NjSBg/2/

我想您也可能忘记应用绑定(bind)...

编辑

我很抱歉张贴了错误的 fiddle ，现在正确的一个。

self.addClient = function () {
    var client = {
        UserId: self.userId(),
        Name: self.name(),
        Logo: self.logo()
    }
    lucidServer.addClient(ko.toJSON(client));
    self.clients.push(client);
}.bind(self);

您添加括号以获取可观察对象的当前静态值