使用knockout更新"placeholder"属性

Question

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

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

我有一个JSON来存储我想用于"pass"关键字的值,它可以正常工作.

我尝试使用相同的方法设置"占位符"属性,但它不起作用:

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

我试图修改knockout.js文件,添加"ko.bindingHandlers ['placeholder']"函数,基于"ko.bindingHandlers ['value']"(在"ko.jsonExpressionRewriting.writeValueToProperty"中修改"占位符"而不是"值")函数),但它无法正常工作,它将信息放在"值"属性而不是"占位符".

有谁知道解决这个问题的方法？

非常感谢你!

Answer 1

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

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

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

Answer 2

如果要使用data-bind="placeholder: user",可以在js代码中创建自定义绑定.

您使用的是正确的路径,ko.bindingHandlers['placeholder']但您不需要编辑knockout.js文件- 事实上,这是不好的做法.

这需要一个非常基本的自定义绑定:

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

有关自定义绑定的指南,请参阅此处

虽然Knockout本身就是突兀的,但这个稍微少一些.它消除了占位符如何从视图应用于元素的知识.

事实上,如果将来你想应用某种jQuery插件来在不支持该placeholder属性的浏览器中显示占位符,那么这将是place(init:)初始化插件 - 你还需要一个update:函数案件.