knockout.js 使用挖空更新“占位符”属性

wgmfuz8q  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(157)

我有一个表单,其中的一些字段使用knockout.js(2.1.0版)获取一些数据。例如,要更新输入的“value”字段,我输入:

<input type="text"  name="contrasena" id="login-user" value="" placeholder="" data-bind="value: user">

我有一个JSON来存储我想用于“pass”关键字的值a,它工作正常。
我尝试使用相同的方法设置“placeholder”属性,但不起作用:

<input type="text"  name="contrasena" id="login-user" placeholder="" data-bind="placeholder: user">

我尝试修改knockout.js文件,在“ko. bindingHandlers ['value']”的基础上添加“ko. bindingHandlers ['placeholder']”函数(在“ko.jsonExpressionRewriting.writeValueToProperty”函数中修改“placeholder”而不是“value”),但它无法正常工作,它将信息放在“value”属性中而不是“placeholder”中。
有人知道解决这个问题的方法吗?
非常感谢!

agxfikkp

agxfikkp1#

您应该使用现有的 attr 绑定,如下所示:

<input data-bind="attr: {placeholder: ph}" />

var Model = function () {
    this.ph = ko.observable("Text..."); 
}
ko.applyBindings(new Model());
aiqt4smr

aiqt4smr2#

如果你想使用data-bind="placeholder: user",你可以在js代码中创建一个custom-binding
您使用ko.bindingHandlers['placeholder']的路径是正确的,但是您不需要编辑knockout.js文件 *--事实上,这是一种糟糕的做法 *。
这将需要一个非常基本的自定义绑定:

ko.bindingHandlers.placeholder = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var underlyingObservable = valueAccessor();
        ko.applyBindingsToNode(element, { attr: { placeholder: underlyingObservable } } );
    }
};

有关自定义绑定的指南,请参见here
尽管挖空本身就很突出,但它的突出程度稍低一些。它从视图中删除了占位符如何应用于元素的信息。
事实上,如果将来您希望应用某种jQuery插件在不支持placeholder属性的浏览器中显示占位符,这将是初始化插件的位置(init:)--在这种情况下,您还需要一个update:函数。

9w11ddsr

9w11ddsr3#

最后得到了如下所示的内容,用于设置占位符属性:

data-bind="attr:{ 'disabled': IDIsDisabled(), placeholder: IDIsDisabled() ? 
'textbox is disabled' : '' }"

相关问题