javascript - 使用 Kendo 进行动态 HTML 元素绑定(bind)

Question

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

然后，我在幕后有一个剑道 View 模型，其中包含一个名为“address”的变量，该变量将保存一个地址字符串，例如:“123 Main Street”。

当页面首次加载时，shipToAddress 元素数据绑定(bind)到 kendo View 模型的地址变量，例如:“123 Main Street”。当页面最初加载时，deliverToAddress 没有任何数据绑定(bind)。然而，一旦选中了 sameAsShipToAddress 复选框，我想向 DeliverToAddress 添加一个数据绑定(bind)属性，这样它也会查看 kendo View 模型的地址变量。

这是 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" />

这是后端 Kendo View 模型:

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

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

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

ViewModel 已经是双向绑定(bind)的，因此重新绑定(bind)模型，绑定(bind)将在两个方向上起作用。

添加属性(并因此绑定(bind)到 ViewModel 的 address 字段)后，您还需要设置 deliverToAddress 字段的值。之后进行绑定(bind)。解除绑定(bind)(此处将值设置为空字符串)工作正常 - 您可以使用浏览器 DOM 资源管理器看到该属性已添加 - 更改地址文本并单击测试按钮 - DeliverToAddress 也会更改。

我在 Telerik Dojo 中创建了一个示例.

View 模型代码如下所示(我添加了一个按钮来测试行为):

$(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 .