不调用 Knockout X-Editable 成功处理程序

Question

我在 table 中有一列具有敲除 x-editable 绑定值。页面加载后，作为 ko 绑定的结果，为每一行调用成功处理程序（这很好，我可以避免这种情况）。但是一旦页面设置好，我继续更改一个值（将任何行的 employeeId 设置为 7 位数字），就不再调用成功处理程序。在打开的控制台日志中查看此 fiddle：

http://jsfiddle.net/csabatoth/y3rfe6Lw/6/

HTML:

<table style="table table-striped">
    <thead>
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Employee ID</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: candidates">
        <tr>
            <td><span data-bind="text: firstName"></span></td>
            <td><span data-bind="text: lastName"></span></td>
            <td><span data-bind="editable: employeeId, editableOptions: { validate: $root.validateEmployeeId, success: $root.persistEmployeeId($data) }"></span></td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    function AppViewModel() {
        var self = this;

        self.validateEmployeeId = function (value) {
            if (value == null || !value.match(/^\d{7}$/))
                return 'Invalid EmployeeID';
        }

        self.persistEmployeeId = function (data) {
            console.log(data.employeeId);
        }

        self.candidates = ko.observableArray([
            { firstName: "John", lastName: "Dow", employeeId: 1001, applicantId: 1 },
            { firstName: "Jane", lastName: "Doe", employeeId: 1002, applicantId: 2 },
            { firstName: "Foo", lastName: "Bar", employeeId: 1003, applicantId: 3 }
        ]);
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());

});

不过我需要保留数据更改。我试图通过制作 employeeId ko.observable 并订阅它的更改事件来解决这个问题。但是通过订阅，我只收到 newValue 作为参数。我需要数据行和其中的 applicantId。 employeeId可能不是唯一的，我需要持久化API调用需要applicantId和employeeId。

我该如何解决这个问题？

Answer 1

我无法用 success 绑定做你想做的事情（我认为你做不到）但我只是使用了带有 subscribe 的 Knockout。

声明 Applicant ViewModel，因为我们需要将 employeeId 作为可观察对象来订阅：

var Applicant = function (model) {
    var self = this;

    self.firstName = model.firstName;
    self.lastName = model.lastName;
    self.employeeId = ko.observable(model.employeeId);
    self.applicantId = model.applicantId;

    self.employeeId.subscribe(function (newValue) {
        console.debug('Applicant ' + self.applicantId + ' now has employeeId: ' + newValue);
    });
}

更改候选数组人口以改为使用 Applicant ViewModel：

var candidates = [
    new Applicant({ firstName: "John", lastName: "Dow", employeeId: 1001, applicantId: 1 }),
    new Applicant({ firstName: "Jane", lastName: "Doe", employeeId: 1002, applicantId: 2 }),
    new Applicant({ firstName: "Foo", lastName: "Bar", employeeId: 1003, applicantId: 3 })
];

self.candidates = ko.observableArray(candidates);

JsFiddle

不调用 Knockout X-Editable 成功处理程序

Knockout X-Editable success handler is not called

twitter-bootstrap

knockout.js

knockout-validation

x-editable