27

我有一个表单，其中一些字段使用 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.writeValueToProperty”中修改“placeholder”而不是“value”函数），但它不能正常工作，它将信息放在“值”属性而不是“占位符”中。

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

非常感谢！

4

2 回答 2

110

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

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

var Model = function () {
    this.ph = ko.observable("Text..."); 
}
ko.applyBindings(new Model());
于 2012-09-28T09:40:25.270 回答
37

如果你想使用，你可以在你的 js 代码中data-bind="placeholder: user"创建一个自定义绑定。

您在正确的路径上使用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属性的浏览器中显示占位符，这将是init:初始化插件的地方 ()——你还需要一个update:函数案子。

于 2012-10-01T13:04:49.577 回答