어떻게 하면 녹아웃 JS가 초점 손실 대신 키 누름으로 데이터를 바인딩할 수 있습니까?
이 녹아웃 js 예제는 필드를 편집하고 TAB를 누르면 뷰 모델 데이터와 필드 아래의 텍스트가 업데이트됩니다.
이 코드를 변경하여 키를 누를 때마다 뷰 모델 데이터가 업데이트되도록 하려면 어떻게 해야 합니까?
<!doctype html>
<html>
<title>knockout js</title>
<head>
<script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script>
<script type="text/javascript">
window.onload= function() {
var viewModel = {
firstName : ko.observable("Jim"),
lastName : ko.observable("Smith")
};
viewModel.fullName = ko.dependentObservable(function () {
return viewModel.firstName() + " " + viewModel.lastName();
});
ko.applyBindings(viewModel);
}
</script>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>
</html>
<body>
<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>
추가 파라미터
valueUpdate
바인딩에 valueUpdate라는 매개 변수도 포함되어 있는 경우 변경 사항을 탐지하기 위해 KO가 사용할 브라우저 이벤트를 정의합니다.다음 문자열 값이 가장 일반적으로 유용합니다.
"change"(기본값) - 변경 직후 사용자가 포커스를 다른 컨트롤로 이동할 때 또는 요소의 경우 보기 모델을 업데이트합니다.
"key up" - 사용자가 키를 놓으면 보기 모델이 업데이트됩니다.
"키 누름" - 사용자가 키를 입력하면 보기 모델이 업데이트됩니다.키 업과 달리 사용자가 키를 누른 상태에서 반복적으로 업데이트됩니다.
- "키다운 후" - 사용자가 문자 입력을 시작하는 즉시 보기 모델을 업데이트합니다.이것은 브라우저의 키다운 이벤트를 잡고 이벤트를 비동기적으로 처리함으로써 작동합니다.
보기 모델을 실시간으로 업데이트하려면 이 옵션 중 "키다운 후"가 가장 좋습니다.
버전 3.2에서는 간단하게 텍스트 입력 바인딩을 사용할 수 있습니다.
<input data-bind="textInput: userName" />
이것은 두 가지 중요한 일을 합니다.
- 즉각적인 업데이트를 실시합니다.
- 잘라내기, 끌기, 자동 완성...에 대한 브라우저 차이를 처리합니다.
따라서 추가 모듈, 사용자 정의 컨트롤 등이 필요 없습니다.
업데이트를 원하는 경우afterkeydown"기본적으로," 당신은 그를 주입할 수 있습니다.valueUpdate구속력이 있는value구속력 있는 핸들러새 제품만 공급하면 됩니다.allBindingsAccessor다음을 포함하여 핸들러가 사용할 수 있도록 합니다.afterkeydown.
(function () {
var valueHandler = ko.bindingHandlers.value;
var getInjectValueUpdate = function (allBindingsAccessor) {
var AFTERKEYDOWN = 'afterkeydown';
return function () {
var allBindings = ko.utils.extend({}, allBindingsAccessor()),
valueUpdate = allBindings.valueUpdate;
if (valueUpdate === undefined) {
return ko.utils.extend(allBindings, { valueUpdate: AFTERKEYDOWN });
} else if (typeof valueUpdate === 'string' && valueUpdate !== AFTERKEYDOWN) {
return ko.utils.extend(allBindings, { valueUpdate: [valueUpdate, AFTERKEYDOWN] });
} else if (typeof valueUpdate === 'array' && ko.utils.arrayIndexOf(valueUpdate, AFTERKEYDOWN) === -1) {
valueUpdate = ko.utils.arrayPushAll([AFTERKEYDOWN], valueUpdate);
return ko.utils.extend(allBindings, {valueUpdate: valueUpdate});
}
return allBindings;
};
};
ko.bindingHandlers.value = {
// only needed for init
'init': function (element, valueAccessor, allBindingsAccessor) {
allBindingsAccessor = getInjectValueUpdate(allBindingsAccessor);
return valueHandler.init(element, valueAccessor, allBindingsAccessor);
},
'update': valueHandler.update
};
} ());
만약 당신이 편치 않다면, 당신이 "우월"할 것입니다.valuebinding, 재정의하는 사용자 정의 바인딩에 다른 이름을 지정하고 해당 바인딩 핸들러를 사용할 수 있습니다.
ko.bindingHandlers.realtimeValue = { 'init':..., 'update':... };
이와 같은 솔루션은 녹아웃 버전 2.x에 적합할 것입니다.녹아웃 팀은 녹아웃 버전 3 이상의 텍스트 입력 바인딩을 통해 텍스트와 유사한 입력에 대한 보다 완벽한 바인딩을 구체화했습니다.텍스트 입력을 위한 모든 텍스트 입력 방법을 처리할 수 있도록 설계되었으며,textarea. 실시간 업데이트까지 처리할 수 있어 이 접근 방식이 효과적으로 쓸모없게 됩니다.
제프 메르카도의 대답은 환상적이지만 아쉽게도 녹아웃 3으로 깨졌습니다.
하지만 녹아웃 3 변경 작업을 하면서 ko dev들이 제시한 답변을 찾았습니다.아래 의견은 https://github.com/knockout/knockout/pull/932 에서 확인할 수 있습니다.코드:
//automatically add valueUpdate="afterkeydown" on every value binding
(function () {
var getInjectValueUpdate = function (allBindings) {
return {
has: function (bindingKey) {
return (bindingKey == 'valueUpdate') || allBindings.has(bindingKey);
},
get: function (bindingKey) {
var binding = allBindings.get(bindingKey);
if (bindingKey == 'valueUpdate') {
binding = binding ? [].concat(binding, 'afterkeydown') : 'afterkeydown';
}
return binding;
}
};
};
var valueInitHandler = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
return valueInitHandler(element, valueAccessor, getInjectValueUpdate(allBindings), viewModel, bindingContext);
};
}());
http://jsfiddle.net/mbest/GKJnt/
Edit Ko 3.2.0은 이제 새로운 "textInput" 바인딩으로 보다 완벽한 솔루션을 제공합니다.Salvidor Dali의 답변 보기
언급URL : https://stackoverflow.com/questions/4386311/how-can-i-get-knockout-js-to-data-bind-on-keypress-instead-of-lost-focus
'programing' 카테고리의 다른 글
| 파이썬에서 사전을 멋지게 출력하는 방법? (0) | 2023.09.08 |
|---|---|
| Android Gradle Apache HttpClient가 존재하지 않습니까? (0) | 2023.09.08 |
| 파워쉘 안에서 키스트로크를 수행하는 방법은? (0) | 2023.09.08 |
| 메시지가 표시된 후 페이지 다시 로드, jQuery (0) | 2023.09.03 |
| 커밋 메시지 없이 Git 커밋 (0) | 2023.09.03 |