knockout.js - 如何在 ViewModel 挖空中调用函数

Question

我有一个名为客户的模型:

function customer(id, name, age, comments) {
    var self = this;

    self.Id = id;
    self.Name = name;
    self.Age = age,
        self.Comments = comments;

    self.addCustomer = function () {
        $.ajax({
            url: "/api/customer/",
            type: 'post',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function (result) {
                //SOMETHINGS WRONG HERE
                customerVM();
            }
        });
    }
}

添加客户后，客户列表不会自动更新。在模型中调用 customerVM() 会进入 viewModel 函数，但不会进入 getCustomers 函数，所以我一定是错误地调用了 viewModel。这就是我从调试中看到的。

显示列表的函数在viewModel中:

function customerVM() {
    var self = this;
    self.customers = ko.observableArray([]);
    self.getCustomers = function () {
        self.customers.removeAll();
        $.getJSON("/api/customer/", function (data) {
            $.each(data, function (key, val) {
                self.customers.push(new customer(val.Id, val.Name, val.Age, val.Comments));
            });
        });
    };
}

我需要在添加客户后以某种方式调用 getCustomers。我该怎么做？？

这是客户html

<table >
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: customers" >
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Age"></td>
            <td data-bind="text: Comments"></td>
        </tr>
    </tbody>
</table>
<br />
<input type="button" id="btnGetCustomers" value="Get Customers" data-bind="click: getCustomers" />

Answer 1

我认为您在这里问的更深层次的问题是关于如何在浏览器中管理您的数据并使其与服务器上的数据保持同步。我昨天回答了一个类似的问题，你可以在这里阅读:Adding new elements to a knockout observable array - best practices?

在您的问题和代码中，您似乎在尝试将新客户插入服务器，然后在插入后将整个客户列表读回到您的 View 模型中。您可能需要您没有提到的这个，但通常这种模式不是必需的。

在向服务器插入 之后要求从服务器读取 的最常见情况是检索服务器为您刚刚添加的对象生成的标识符。对于大多数 MV* 浏览器端框架——包括 Knockout——一个常见的模式是“插入”api 调用返回新元素的 ID(或者无论你需要返回多少数据)并简单地更新客户端版本具有新 ID 的那个模型。如果 ID 属性是可观察的，Knockout 将自动更新您的 UI。这是一个例子:

var customer = function(name, age, comments){
    var self = this;
    self.id = ko.observable();//unknown when created in the browser
    self.name = ko.observable(name);
    self.age = ko.observable(age);
    self.comments = ko.observable(comments);
}

var customersViewModel = function(){
    var self = this;
    self.customers = ko.observableArray([]);
    self.addCustomer = function(customer){
        self.customers.push(customer);
        $.ajax({
            url: "/api/customer/add",
            type: 'post',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function (result) {
                //assuming result will contain the server-side customer id
                //we provide that value to our customer's id observable
                //and knockout will update the UI
                customer.id(result.newCustomerId);
                //no need to update the entire array, and 
                //our 'customer' has already been pushed into our 
                //observable array so we're done. 
            }
        });
    }
}

当您的客户处于“待定”状态时(当浏览器正在等待服务器响应插入 api 调用时)您知道客户不会有 ID。您可以在您的绑定(bind)中使用它来向您的客户应用“待定”类，如下所示:

<tbody data-bind="foreach: customers" >
    <tr data-bind="css : {'pending': !id()}">
        <td data-bind="text: id"></td>
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td data-bind="text: comments"></td>
    </tr>
</tbody>

希望对您有所帮助!