剣道を使用した動的HTML要素のバインディング

Question

私は現在の状況です： 私は3つのHTML要素を持っています。 shipToAddressというテキストボックス、deliverToAddressという別のテキストボックス、sameAsShipToAddressというチェックボックスがあります。

私は、アドレスの文字列を保持するaddressという変数を含む舞台裏の剣道ビューモデルを持っています： "123 Main Street"。

ページが最初に読み込まれるとき、shipToAddress要素は、剣道ビューモデルのアドレス変数「123 Main Street」にデータバインドされます。 deliverToAddressには、ページが最初にロードされたときのデータバインディングはありません。しかし、同じAsAshipToAddressチェックボックスがオンになったら、データバインド属性をdeliverToAddressに追加して、剣道ビューモデルのアドレス変数も調べます。ここで

はHTMLです：

<input id="shipToAddress" 
     data-bind="value: address" /> 

<input type="checkbox" 
     id="deliverSameAsShipTo" 
     value="deliverSameAsShipTo" 
     data-bind="checked: sameAsShipToAddress, 
        events: { click: differentDeliveryAddress }" /> 

<input id="deliverToAddress" /> 

そしてここでは、バックエンド剣道ビューモデルである：

var _vm = kendo.observable({ 
    address: "", 
    sameAsShipToAddress: false, 

    differentDeliveryAddress() { 
     if (!this.sameAsShipToAddress) 
      $("#deliverToAddress").attr("data-bind", "value: address"); 
     else 
      $("#deliverToAddress").removeAttr("data-bind"); 
    } 


}); 

これを行うことができますか？私は次のコードに近いと思うが、現在はdeliverToAddressのvalueプロパティが設定されていない。 deliverToAddress要素の属性を更新する方法がいくつか必要ですか？

Answer 1

コードは正しく動作し、最終的なソリューションに非常に近づいています。代わりにバインドされたフィールドの値を設定するので、プロパティ値として「バインディング定義」を設定します。

$("#deliverToAddress").attr("data-bind", "value: address"); 

のViewModelはすでに双方向にバインドされているので、モデルを再バインドし、結合両方向に動作します。

プロパティを追加した後（したがって、ViewModelのaddressフィールドにバインドした後）、deliverToAddressフィールドの値も設定する必要があります。その後、拘束力があります。バインドを解除する（値を空文字列に設定する）ことは正しく動作します。ブラウザーDOMエクスプローラーを使用して属性が追加されていることがわかります。アドレステキストを変更し、テストボタンをクリックします。

Telerik Dojoに例を作成しました。

ビューモデルのコードは、この（私は動作をテストするためのボタンが追加されている）のようになります。

$(document).ready(function(){ 
    var vm = kendo.observable({ 
               address: "", 
               sameAsShipToAddress: false 
    }); 
    kendo.bind(document.body, vm); 
    // 
    $("#setDeliverAddressButton").kendoButton({ 
    click: function(e) { 
      console.log(vm.sameAsShipToAddress); 
      if (vm.sameAsShipToAddress) { 
       $("#deliverToAddress").attr("data-bind", "value: address"); 
       $("#deliverToAddress").val(vm.address); 
      } 
      else { 
       $("#deliverToAddress").removeAttr("data-bind"); 
       $("#deliverToAddress").val(""); 
      } 
     } 
    }); 
    $("#triggerChangeButton").kendoButton({ 
    click: function(e) { 
     kendo.bind(document.body, vm); 
    } 
    }); 
}); 

HTML：

<input id="shipToAddress" data-bind="value: address" /> 

<input type="checkbox" 
      id="deliverSameAsShipTo" 
      value="deliverSameAsShipTo" 
      data-bind="checked: sameAsShipToAddress" /> 

<input id="deliverToAddress" /> 
<button role="button" id="setDeliverAddressButton">set deliver address</button> 

双方向更新

別のオプション（またはこれを常に行う必要がある場合もあります）は、この説明で説明されているように、プログラマチックに変更をトリガーすることです。How to update the ViewModel after programatic changes。