Как создать пользовательскую привязку текста подсказки нокаута?

Question

Я пытаюсь создать пользовательскую привязку, чтобы показать текст подсказки в текстовых вводах.

пока у меня есть это, но это не работает:

ko.bindingHandlers.hintText= {
    init: function (element, valueAccessor) {
        element.focus(function () {
            if ($(this).val() === defaultText) {
                $(this).attr("value", "");
            }
        });
        element.blur(function () {
            if ($(this).val() === '') {
                $(this).val(valueAccessor());
            }
        });
    }
}

HTML:

<input id="profileID" type="text" data-bind="hintText:'Enter Profile ID'" />

Answer 1

HTML5 placeholder Атрибут должен выполнить это для вас.

Если требования вашего браузера поддерживают placeholder атрибут, вы можете вызвать его напрямую с помощью KnockOutJS' attr привязка, как это:

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

Если вам нужна поддержка для более старых браузеров, для вас должна быть предусмотрена прокладка: https://github.com/parndt/jquery-html5-placeholder-shim

Чтобы использовать эту прокладку, вам нужно создать пользовательскую привязку, чтобы вы могли вручную вызвать $.placeholder.shim(); по мере необходимости, когда меняется заполнитель.

Вот привязка "заполнитель", которая применяет прокладку (отредактировано):

ko.bindingHandlers.placeholder = {
    init: function (element, valueAccessor) {
        var placeholderValue = valueAccessor();
        ko.applyBindingsToNode(element, { attr: { placeholder: placeholderValue} } );
    },
    update: function(element, valueAccessor){
        $.placeholder.shim();
    }
};

Ваш HTML будет выглядеть так:

<input data-bind="placeholder: hintText">