使用Kendo的动态HTML元素绑定

Dynamic HTML Element Binding Using Kendo

本文关键字：元素 绑定 HTML 动态 Kendo 使用      更新时间：2023-09-26

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

然后，我在幕后有一个剑道视图模型，其中包含一个名为address的变量，该变量将包含一个地址字符串，例如："123 Main Street"。

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

这是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");
    }

});

这能做到吗？我觉得我已经接近下面的代码了，但目前还没有设置deliveryToAddress的value属性。我需要了解如何刷新deliveryToAddress元素的属性吗？

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

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

ViewModel已经双向绑定，因此重新绑定模型和绑定将双向工作。

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

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

双向更新

另一种选择（甚至您需要始终这样做）是以程序方式触发更改，如本讨论中所述：如何在程序更改后更新ViewModel。

相关文章：