有條件的viewmodel綁定

Question

嗨我已經開始使用Knockout，因爲它爲我的目的更容易，然後jQuery。我之前使用過jQuery，但這使得我的代碼幾乎不可讀。

我有這個JavaScript的視圖模型

function ovm() { 
    this.delStreet = ko.observable(""); 
    this.deliveryNotSameAsInvoice = ko.observable(false); 
    this.invStreet = ko.observable(""); 
} 
ko.applyBindings(new ovm()); 

這個HTML：

<label><input type="checkbox" data-bind="checked: deliveryNotSameAsInvoice" />if your invoice address is not the same as delivery</label> 
<div id="delivery"> 
    <input type="text" placeholder="Street" 
     data-bind="value: delStreet, valueUpdate:'afterkeydown'" /> 
</div> 
<div id="invoice" data-bind="visible: deliveryNotSameAsInvoice"> 
    <input type="text" placeholder="Street" 
     data-bind="value: invStreet, valueUpdate:'afterkeydown'" /> 
</div> 
<hr/> 
Delivery street: <span data-bind="text: delStreet"></span><br/> 
Invoice street: <span data-bind="text: invStreet"></span><br/> 

的事情是，我想invStreet有delStreet的值，只要該複選框取消選中。我有一個working jsFiddle here ，並發現這SO question about conditional binding 但我找不到一個好的代碼示例。在jQuery中，我不得不將綁定事件綁定到每個文本框，並根據複選框是否被選中，我必須設置幾個字段。這是很多工作。特別是具有較大的「視圖模式」

Answer 1

使用計算觀察到的，invStreet ..這樣

function ovm() { 
    var self = this; 
    this.delStreet = ko.observable(""); 
    this.deliveryNotSameAsInvoice = ko.observable(false); 
    this.invStreet = ko.observable(""); 
    var invStreetCheck = ko.computed(function(){ 
     var checked = self.deliveryNotSameAsInvoice(), 
      delStreet = self.delStreet(); 
     if(!checked) 
      return self.invStreet(delStreet); 
     return self.invStreet(); 
    }); 
} 

ko.applyBindings(new ovm()); 

現在，當檢查結合是真的，那將返回「」否則它將包含delStreet。值。