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“函数”，但它无法正常工作，它将信息放在“value”属性而不是“placeholder”。

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

非常感谢！

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代码中创建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:函数。

使用knockout更新“placeholder”属性

2 个答案: