javascript - X-Editable 更改后 Knockout Subscribe 不触发

Question

用例

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

问题

对于我的问题和相应的简化示例，我去掉了 dataTables 部分。

variable.subscribe 在 x-editable 更改它之后，knockout viewmodel 中的 variable.subscribe 似乎从未触发。我没有看到任何错误。我检查了多个例子。目前，我没有更多线索可查。

版本

• knockout :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 - 挖空 View 模型部分

(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)。但是，我从未见过订阅功能起作用。在我的非固定示例代码中，我还使用了可观察数组。没有在那里工作。订阅是否只是不从浏览器端获取更改，而是仅在 View 模型发生更改时(例如，当某些代码将数据推送到可观察数组时？)

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

Answer 1

您需要 x-editable 自定义绑定(bind)才能使 x-editable 与 knockoutjs 配合良好。

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

所以你会做

<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 模型部分

(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 控件将与您的 observables 同步。