Обновление атрибута "placeholder" с использованием нокаута

У меня есть форма с некоторыми полями, получающими некоторые данные с помощью knockout.js(версия 2.1.0). Например, чтобы обновить поле "значение" ввода, я положил:

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

У меня есть JSON для хранения значения a, которое я хочу использовать для ключевого слова "pass", и оно работает правильно.

Я попытался установить атрибут "placeholder", используя тот же метод, но он не работает:

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

Я попытался изменить файл knockout.js, добавив функцию ko.bindingHandlers ['placeholder'] на основе "ko.bindingHandlers ['value']" (изменение "placeholder" вместо "value" в "ko.jsonExpressionRewriting.writeValueToProperty" ), но он работает неправильно, он помещает информацию в атрибут "value" вместо "placeholder".

Кто-нибудь знает, как это решить?

Большое спасибо!

Ответ 1

Если вы хотите использовать data-bind="placeholder: user", вы можете создать custom-binding в вашем js-коде.

Вы были на правильном пути, используя ko.bindingHandlers['placeholder'], но вам не нужно редактировать файл knockout.js - на самом деле это плохая практика.

Для этого потребуется очень простая настройка:

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

Для руководства по пользовательским привязкам см. здесь

Хотя нокаут сам по себе является навязчивым, это немного меньше. Он удаляет знания о том, как замещающий объект применяется к элементу из представления.

В самом деле, если в будущем вы захотите применить какой-то плагин jQuery для показа заполнителей в браузерах, которые не поддерживают атрибут placeholder, это будет место (init:) для инициализации плагина - - вам также понадобится функция update: в этом случае.

Ответ 2

Вы должны использовать существующее привязку attr, например:

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

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