具有“只读”和“禁用”等属性的敲除 attr 绑定

Posted 2023-02-22

【中文标题】具有“只读”和“禁用”等属性的敲除 attr 绑定

【英文标题】：Knockout attr binding with attributes like 'readonly' and 'disabled'

【发布时间】：2012-12-19 08:49:54

【问题描述】：

将 Knockout 的“attr”数据绑定与 “readonly” 和 “disabled” 等独立属性一起使用的建议“最佳实践”方式是什么？ >?

这些属性是特殊的，因为它们通常通过将属性值设置为属性名称来启用（尽管如果您只是在 html 中包含没有任何值的属性名称，许多浏览器也可以正常工作）：

<input type="text" readonly="readonly" disabled="disabled" value="foo" />

但是，如果您不希望应用这些属性，通常的做法是从 HTML 中完全省略它们（而不是像 readonly="false" 那样做）：

<input type="text" value="foo" />

Knockout 的“attr”数据绑定不支持这种情况。一旦我提供了一个属性名称，我还需要提供一个值：

<input type="text" data-bind="attr:  'disabled': getDisabledState() " />

是否有跨浏览器的方式关闭“禁用”或“只读”？或者，如果我不想禁用该项目或将其设为只读，是否可以使用 自定义绑定 来不呈现 任何内容？

【问题讨论】：

我不明白，如果你没有禁用甚至显示，为什么你需要提供禁用？

我给出的示例旨在简单地演示问题。问题是这样的：HTML 中的一些属性是独立的属性——它们实际上并不需要一个值。如果您不希望这些属性影响 HTML，那么您只需忽略它们即可。但是 Knockout 的“attr”数据绑定机制不支持这种情况。

【参考方案1】：

Knockout 的“attr”数据绑定确实支持这种情况，只需从您的 getDisabledState() 函数返回 null 或 undefined，它就不会发出该属性。

演示Fiddle.

【讨论】：

如何验证该属性没有使用 Firebug 或类似工具发出？当我尝试从上面的演示 Fiddle 查看“实时”HTML 时，我仍然看到 Knockout 数据绑定代码，而不是实时呈现的 标记。 （但是，我承认我从来没有想过这样做；在我的 getDisabledState() 函数中，我总是返回“禁用”或空字符串“”）。

如果我的小提琴与您的浏览器一起工作，那么它就可以工作。我不使用萤火虫。在 Chrome 开发工具中，很明显，如果您返回 "disabled" 和 undefined，它会添加和删除属性。

好的。我已经使用 Chrome 验证了这一点。感谢您的快速响应和演示小提琴。这是我从未想过的简单而优雅的解决方案。我通常将我的返回值初始化为预期的数据类型（“禁用”或“只读”是一个字符串）。我将初始化为“未定义”，我应该很高兴。谢谢！

如果 getDisabledState() 函数返回 true/false，则可以使用内联三元运算符，而无需修改函数： 我将与返回字符串或 null 的效果相同。

【参考方案2】：

您还可以像这样为只读创建绑定：

ko.bindingHandlers['readonly'] = 
'update': function (element, valueAccessor) 
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (!value && element.readOnly)
        element.readOnly = false;
    else if (value && !element.readOnly)
        element.readOnly = true;

;

来源：https://github.com/knockout/knockout/issues/1100

【讨论】：

感谢分享源代码，包括内联代码。

好帖子！您能否还包括如何使用它的演示？我确信我能弄明白，但我以前从未做过自定义绑定，它对其他人也很有用。

@jpaugh，对不起，我好几年没用过KO了。这些天来，我使用 Aurelia 框架。

【参考方案3】：

Knockout 具有 enable 绑定和 disable 绑定。

我不确定在提出问题时这些是否可用，但任何提及此问题的人都应该知道。

【讨论】：

一定要选对的。 !observableProperty 不起作用。 NOT ! 没有被评估者选中。

!observableProperty() 工作虽然:) 比自定义绑定快得多，而且通常更干净

@P.Brian.Mackey 这是一个常见的 Knockout 初学者错误。当你添加一个像 !在 observableProperty 前面，需要在 propertyName 的末尾添加 () 来显式调用它。这告诉 Knockout 将整个表达式提升为合成计算。如果您使用 Chrome 调试器并输入不存在的伪造 observableProperty，它将在控制台中生成 VM:SomeLineNumber 错误。单击 VM:SomeLineNumber，您将看到 Knockout 生成的内容。