X-Editable 更改后淘汰订阅未触发

Question

用例

我正在尝试围绕可以存在于 js 数据表实例中的淘汰视图模型设置 x-editable 库。在加载时，它会下拉表格数据。用户将能够编辑一行的一个字段，并且会自动保存。我还添加了一些客户端验证。

问题

对于我的问题和相应的简化示例，我将 dataTables 部分取出。

在 x-editable 更改后，淘汰视图模型中的 variable.subscribe 似乎永远不会触发。我没有看到任何错误。我已经检查了多个示例。目前，我没有更多的线索。

版本

• 淘汰赛：3.4.0
• x 可编辑：1.5.1
• 有效：2.0.0

HTML

<div id="simple-view">
    <span class="editable" data-bind="text: testA"></span>
</div>

JS - Knockout View Model 部分

(function(){
    'use strict';

    function SimpleViewModel(){
        var self = this;

        self.testA = ko.observable("Simple");

        self.testA.subscribe(function(changes){
            console.log("name changes: " + changes.length);
        });
     }

     ko.applyBindings(new SimpleViewModel(), document.getElementById('simple-view'));
})();

JS - 调用 X-Editable

document.addEventListener("DOMContentLoaded", function(event) {
    $(".editable").editable({
        type: 'text',
        url: function(params){
          console.log("url test: " + JSON.stringify(params));
        },
        mode: 'inline',
        anim: false,
        validate:function(value){
            var result = valib.String.match(value, /^[a-zA-Z0-9-_]+$/);
            console.log("inside validation: " + result);
            if(!result){
                return "This is a test validation response";
            }
        }
    });
});

问题回顾

我可以看到用于触发验证消息和 url 参数的控制台日志（这里实际上是 x-editable 的 on submit）。但是，我从未见过订阅功能起作用。在我的非固定示例代码中，我也在使用可观察数组。没有在那里工作。 subscribe 是否根本不会从浏览器端获取更改，而是仅在视图模型更改时（例如，当某些代码将数据推送到可观察数组时？）

附言 我最初试图让 knockout-x-editable 与淘汰赛验证一起工作。但是，在尝试了我能找到的每个示例并单步执行插件代码之后，k-x-e 从未起作用。 k-x-e 期望 ko-validation 插件能够工作，但它没有触发错误消息。因此，我最终遇到了可以克服的障碍，并决定尝试上述方法。

Answer 1

您需要 x-editable 自定义绑定来启用 x-editable 与 knockoutjs 配合使用。

knockoutjs 的 X 可编辑自定义绑定可用 here。在您的页面中的 knockoutjs 之后包含此绑定。

你会这样做的

<div id="simple-view">
    <span class="editable" data-bind="editable: testA, editableOptions:{/* your x-editable options here type, url, mode etc */}">  </span>
</div>

和你的 JS - Knockout View Model 部分

(function(){
    'use strict';

    function SimpleViewModel(){
        var self = this;

        self.testA = ko.observable("Simple");

        self.testA.subscribe(function(changes){
            console.log("name changes: " + changes.length);
        });
     }

     ko.applyBindings(new SimpleViewModel(), document.getElementById('simple-view'));
})();

然后您的 xeditable 控件将与您的 observable 同步。