Javascript 使用Kendo动态绑定HTML元素

以下是我目前所处的场景： 我有三个HTML元素。一个名为shipToAddress的文本框，另一个名为deliverToAddress的文本框和一个名为sameAsShipToAddress的复选框

然后，我在幕后创建了一个剑道视图模型，其中包含一个名为address的变量，该变量将保存一个地址字符串，例如：“123 Main Street”

当页面第一次加载时，shipToAddress元素数据绑定到kendo视图模型的地址变量，例如：“123 Main Street”。当页面最初加载时，DeliverToadress没有数据绑定。但是，一旦选中SameashipToAddress复选框，我想向deliverToAddress添加一个数据绑定属性，这样它也会查看kendo视图模型的address变量

以下是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" />

---

这能做到吗？我觉得我对下面的代码已经很熟悉了，但是目前还没有设置DeliverToadAddress的value属性。我是否需要了解如何刷新deliverToAddress元素的属性？

您的代码工作正常，并且非常接近最终解决方案。将“绑定定义”设置为属性值，而不是设置绑定字段的值：

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

---

ViewModel已经双向绑定，因此重新绑定模型和绑定将在两个方向上工作

添加属性（从而绑定到ViewModel的

地址

字段）后，还需要设置

DeliverLoadAddress

字段的值。之后，绑定响应。解除绑定（此处将值设置为空字符串）工作正常-您可以使用浏览器DOM explorer看到，添加了属性-更改地址文本并单击测试按钮-DeliverLoadAddress也会更改

我在中创建了一个示例

视图模型代码如下所示（我添加了一个按钮来测试行为）：

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>

设置递送地址

双向更新

---

另一个选项（甚至您需要始终这样做）是按本讨论中所述的编程方式触发更改：。

是否有绑定和变量的选项，但只有在设置/取消设置复选框时才将其保留为空并设置/填充（相应地清空）？此代码完成了一半的工作。它成功地用shipToAddress文本填充了deliverToAddress输入文本框，但如果deliverToAddress输入文本发生更改，则实际上不会导致ViewModel的address变量发生任何更改。换句话说，DeliverToadAddress字段没有绑定到ViewModel的地址变量。ViewModel已经是双向的-我已经修复了一个错误

.attr（“数据绑定”，“值：地址”）

而不是

.attr（“数据绑定”，vm.address）。您需要刷新ViewModel 2，以便新绑定在ViewModel中处于活动状态。我已经在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);
    }
  });
});

<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>