Question

使用案例

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

问题

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

淘汰视图模型中的

variable.subscribe似乎永远不会在x-editable更改后触发。我没有看到任何错误。我已经检查了多个例子。目前，我还没有更多的线索可以解决。

版本

淘汰赛：3.4.0
x-editable：1.5.1
valib：2.0.0

HTML

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

JS - 淘汰视图模型部分

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

P.S。 我原本试图让knockout-x-editable与淘汰验证一起工作。然而，k-x-e在尝试了我能找到的每个例子并单步执行插件代码后从未工作过。 k-x-e预计ko-validation插件可以工作，但它没有触发错误信息。因此，我最终打了一个砖墙，我可以过去，并决定尝试上述方法。

Answer 1

你需要x-editable自定义绑定来启用x-editable play with 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 Partion

(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同步。

X-Editable Change后，Knockout订阅不会被解雇

1 个答案: