デタッチされたノードでKnockoutJSを使用する

Question

私が探しているのは、jQueryのデタッチメソッドを使用していくつかのノードをデタッチし、ViewModelを更新し、ノードを戻して値を更新することです。

これは可能ですか？

ここに私が撮影しているもののfull fiddleがあります。基本的には、左から右に移動し、切り離し、更新、および添付をクリックし、テキストボックスに新しい値を持たせたいと考えています。

---

RPの答えに基づいてUPDATE

を、最善の策は、これはあなたのユースケースに収まると仮定すると、隠されたDOM にそれらを添付し、あなたのviewmodelを更新し、あなたのノードを表示するのです。このような何かが私の作品：

$("#updateAndAttach").click(function() { 
    var junk = $("<div />").css("display", "none"); 
    junk.append(nodes); 
    $("#home").append(junk); 

    vm.a("AAA"); 
    vm.b("BBB"); 

    $(nodes).unwrap(); 
}); 

ENDのUPDATE

---

ここでのフルコード：

はJavaScript

$(function() { 

    function ViewModel() { 
     this.a = ko.observable("a"); 
     this.b = ko.observable("b"); 
    } 

    var vm = new ViewModel(); 

    ko.applyBindings(vm, document.getElementById("home")); 

    var nodes = null; 

    $("#detach").click(function() { 
     nodes = $("#home").children().detach(); 
    }); 

    $("#attach").click(function() { 
     $("#home").append(nodes); 
    }); 

    $("#update").click(function() { 
     vm.a("AAA"); 
     vm.b("BBB"); 
    }); 
})(); 

HTML：

<div id="home"> 
    <input type="text" data-bind="value: a" /> 
    <input type="text" data-bind="value: b" /> 
</div> 

<button id="detach">Detach</button> 
<button id="update">Update</button> 
<button id="attach">Attach</button> 

Answer 1

単一data-bindにおけるバインディングの評価は、それが再評価されたときにそれ自体を処分することを計算観察可能で包み、それが現在の文書の一部ではないことを認識しています。

したがって、あなたが試していることを行うための簡単な回避策はありません。更新が行われている間に要素を隠してから、それらを再表示することができます。

Answer 2

detachメソッドを呼び出すと、切り離されたノードへのバインディングが失われます。それを動作させる最も簡単な方法は、ノードを切り離して接続するたびにバインディングを再適用することです。

このjsfiddleを参照してください：http://jsfiddle.net/EZFDt/

編集：代わりにその回避策を使用すると、パフォーマンスに影響があるかもしれない心に留めておきます。おそらく、問題に近づく方法を考え直すことができます。ノードを切り離すのではなく、別の隠れた場所にノードを移動できますか？あなたは単にそれらを隠すことができますか？

Answer 3

うまく働くすべてのバインディングを保持してDOMにいくつかの有効な位置にすぐにアペンドそして、あなたが質問をし、私はデタッチを使用して発見したので、それはしばらくのです。 をデタッチし、をアプリケーションの状態が変化するときに必要な場所に追加します。

JQUIの要素やフォームなどのように、複数のイベントが添付されたセクションには1つのコピーを実行し、ページに追加するだけで使用します。に行きます。例えば。a サインアップフォームは、の編集プロファイルとしても機能します。

あなたのケースでは、最初にそれを 'visibility：hidden;'に追加します。ノードは、分離された要素のために明確であったある時点で、合理的である可能性があります。

ドン は素晴らしい一日