녹아웃 힌트 텍스트 사용자 정의 바인딩을 만드는 방법은 무엇입니까?

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

이 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">