0

嗨，我已经开始使用 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 的值。我在这里有一个工作的 jsFiddle， 并且发现了这个关于条件绑定的 SO 问题， 但我找不到一个好的代码示例。在 jquery 中，我必须将 keyup 事件绑定到每个文本框，并且根据复选框是否被选中，我必须设置几个字段。工作量很大。特别是对于更大的“视图模型”

4

1 回答 1

1

对 invStreet 使用计算的 observable .. 像这样

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。价值。

于 2013-04-17T15:24:28.610 回答