如何在剑道数据绑定功能中找到元素答案

【问题标题】：How to find the element in kendo data binding function如何在剑道数据绑定功能中找到元素
【发布时间】：2018-04-20 10:05:04
【问题描述】：

在我正在处理的应用程序中，我需要在两种不同情况之一下禁用元素，一种是登录用户仅对表单具有只读访问权限，另一种是满足在字段上设置的条件逻辑.这些表单是动态生成的，构建在带有拖放字段的管理面板上。

我遇到的问题是条件逻辑案例已满足但表单不是只读的。在我现在尝试的情况下，如果表单正在重新打开（已经保存），则禁用某些字段。

输入看起来像这样：

<input name="userName" id="userName" maxlength="64" type="text" class="k-textbox custom-disable" data-bind="value: formData.userName, disabled: isFormDisabled">

条件逻辑在输入上设置 disabled 属性，并为 CSS 添加自定义禁用类。 isFormDisabled 是 viewModel 的布尔属性。

我想做的是创建一个这样的函数：

ViewModel = kendo.observable({    
    ...,
    isFormDisabled: false,
    isElementDisabled: function (e) {
        var customDisabled = $(e.target).hasClass( "custom-disable" );
        return this.get("isEventDisabled")||customDisabled;
    },
    ...
});

并将 disabled 的绑定更改为这个新函数，但由于 disabled 不是事件，所以当我记录 e 时它是未定义的 - 我如何找到绑定到回调迭代的元素？

Kendo Dojo

【问题讨论】：

函数isElementDisabled 中的e 参数看起来像是事件的一部分（因为您尝试读取e.target）该函数如何绑定到您的页面？什么时候应该调用？
data-bind="value: formData.userName, disabled: isElementDisabled" 调用者是元素的禁用绑定，问题是当它进入函数时，e 未定义，这是我需要帮助的，我需要以某种方式找到使用此回调的元素，e.target 可能不是正确的方法，但它是我知道的我想要的示例，即使它目前不起作用。
e 在这种情况下不应该是未定义的，你有一个带有你的代码的 jsfiddle/dojo 来查看错误来自哪里？
Here it is in a dojo. 这至少应该让您更好地了解这一切是如何构建的。

标签： javascript jquery data-binding kendo-ui disabled-input

【解决方案1】：

目前 Kendo 有自己的方式来启用/禁用元素，例如，this explains how to enable/disable a Kendo Combobox

【讨论】：

是的，在处理 MVVM 对象时，您使用我正在使用的 data-bind = "disabled: {observable property or function}"，这部分是正确的，问题是它覆盖了元素上已设置的 disabled 属性。
这个dojo 显示它以我想要的方式使用，除了我在表单上的字段不是来自像这样的剑道数据源。
那不是kendo数据源是kendo observable，并且绑定到整个文档，你也试过了吗？
我应该更清楚一点，我的输入不是由模板中的源绑定创建的，而是函数和属性在 observable 上。我已经更新了这个问题，以便更清楚

【解决方案2】：

这就是我最终弄清楚的 - 对于函数：

isElementDisabled: function (eID) {
    var me = this;
    var element = $("#" + eID);
    var customDisabled = $(element).hasClass("custom-disable");
    return me.get("isEventDisabled") || customDisabled;
},

和绑定 -

<input name="#: columnName #" id="#: columnName #"
    data-bind='value: #: dataContainer #.#: columnName #, disabled: isElementDisabled("#: columnName #")'
/>

由于元素的 ID 与列名匹配并且是唯一的，我可以通过将该 ID 作为属性传递给绑定函数来找到它。

【讨论】：