使用淘汰赛更新“占位符”属性

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['value']”的“ko.bindingHandlers['placeholder']”功能（在“ko.jsonExpressionRewriting”中修改“placeholder”而不是“value” .writeValueToProperty”函数），但它不能正常工作，它将信息放在“value”属性而不是“placeholder”中。

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

非常感谢！

Answer 1

如果你想使用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

虽然 Knockout 本身就很突兀，但这种情况略显逊色。它从视图中删除了占位符如何应用于元素的知识。

事实上，如果将来您想应用某种 jQuery 插件来在不支持 placeholder 属性的浏览器中显示占位符，这将是初始化插件的地方 (init:) - - 在这种情况下，您还需要一个 update: 函数。

Answer 2

您应该使用现有的 attr 绑定，如下所示：

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

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