ノックアウトは、X-編集可能な変更後焼成ない購読

Question

ユースケース

私はJSのDataTableインスタンスの内側に住むことができるノックアウトビューモデルの周りにX-編集可能なライブラリを設定しようとしています。ロードすると、表形式のデータがプルダウンされます。ユーザーは1つの行の1つのフィールドを編集でき、自動的に保存されます。クライアント側の検証も追加しました。

問題

私の問題と簡単な例を対応するために、私は、DataTableの部分を取り出しました。

ノックアウトビューモデル内のvariable.subscribeは、x-editableがそれを変更した後は決して発射しないようです。私はどんな誤りも見ない。私は複数の例を調べてみました。現在、私はそれ以上の手がかりを持っていません。

バージョン

• ノックアウト：3.4.0
• X-編集可能：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-編集可能な

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サブミットです）。しかし、私はsubscribe関数が動作するのを見たことがありません。私の缶詰めされていないサンプルコードでは、私も観測可能な配列で作業していました。そこで働かなかった。サブスクライブするだけでは、ブラウザ側からの変更を取得せずに、ビューモデルが変更されたとき（たとえば、一部のコードがデータを観測可能な配列にプッシュするときなど）に変更を受け取りませんか？

P.S. 私はもともとknockout-x-editableをノックアウト検証で動作させようとしていました。しかし、k-x-eは、プラグインコードを見つけて実行するたびに、すべての例を試してもうまくいかなかった。 ko-validationプラグインが動作するためにk-x-eから何かが予想されましたが、エラーメッセージが表示されませんでした。このように、私は最終的には過去の煉瓦の壁に当たって、上記のアプローチを試みることに決めました。

Answer 1

knockoutjsでx-editable play niceを有効にするには、x編集可能なカスタムバインディングが必要です。

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行います - ノックアウトビューモデル部分

(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コントロールは、あなたの観測で同期されます。