"After Keydown" - 사용자가 문자를 입력하기 시작하자마자보기 모델을 업데이트합니다. 이것은 브라우저의 키 다운 이벤트를 잡고 이벤트를 비동기 적으로 처리함으로써 작동합니다. "AfterkeyDown"을 사용하여 실시간으로 뷰 모델을 업데이트하려면 최선의 선택이됩니다.
"keyup " - 사용자가 키를 발매 할 때 뷰 모델을 업데이트합니다
"keypress" - 사용자가 키를 입력했을 때보기 모델을 업데이트합니다. 사용자가 키를 누른 경우이 업데이트가 반복적으로 업데이트됩니다.
제어 마크 업
HTML 바인딩은 자주 사용되지 않지만 뷰 모델에서 HTML 컨텐츠를 렌더링하는 데 매우 편리합니다. 이 바인딩은 관련 요소의 HTML을 매개 변수의 값으로 설정하고 DOM 요소에서 내부 HTML 속성을 설정하는 것과 같습니다. 매개 변수가 숫자 또는 문자열이 아닌 다른 경우 바인딩은 toString ()의 결과를 요소에 할당합니다.
이 바인딩은 InnerHTML을 사용하여 요소의 컨텐츠를 설정하므로 스크립트 주입 공격의 가능성을 열 수 있기 때문에 신뢰할 수없는 모델 값으로 사용하지 않도록주의해야합니다. 내용이 표시되기에 안전하다는 것을 보장 할 수 없다면 대신 텍스트 바인딩을 사용할 수 있습니다.// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>
녹아웃에는 많은 내장 바인딩이 있지만 아무것도 존재하지 않는 상황을 반드시 만나게 될 것입니다. 이를 위해 녹아웃은 att 매개 변수는 속성 이름이 속성이고 속성 값이 속성에 바인딩되는 값인 JavaScript 객체 여야합니다. 이것은 A EMENT의 HREF 및 제목 또는 IMG 요소의 SRC 및 ALT와 같은 많은 일반적인 시나리오에서 매우 유용합니다.
스타일 추가
CSS와 스타일 내장 바인딩을 사용하여 녹아웃으로 스타일을 바인딩 할 수 있습니다.
CSS 바인딩은 관련 요소에 대해 하나 이상의 CSS 클래스를 설정합니다. 매개 변수는 속성 이름이 원하는 CSS 클래스에 해당하는 JavaScript 객체 여야하며 속성 값은 클래스를 적용 해야하는지 여부를 나타내는 true 또는 false로 평가됩니다. 한 번에 여러 CSS 클래스를 설정할 수 있습니다
당신은 표현을 사용하여 클래스가 적용되는시기를 결정할 수 있습니다. <span data-bind="text: msg, visible: toggle"></span>
가능할 때마다 CSS 클래스를 사용하는 것이 좋습니다. 때로는 특정 스타일을 설정할 수도 있습니다. 녹아웃은 스타일 내장 바인딩으로이를 지원하여 관련 요소의 하나 이상의 스타일 값을 설정합니다. 매개 변수는 속성이 CSS 스타일 이름에 해당하는 객체이어야하며 값은 적용하려는 스타일 값에 해당해야합니다. 일반적 으로이 매개 변수 값은 JSON을 사용하여 선언됩니다
참고 : 이름이 합법적 인 JavaScript 변수 이름이 아닌 속성 또는 CSS 클래스가 있으면 문자열 리터럴이되도록 식별자 이름을 따옴표로 래핑해야합니다. 그리고 이름이 합법적 인 JavaScript 식별자가 아닌 스타일을 적용하려면 해당 스타일의 JavaScript 이름을 사용해야합니다.
처리 이벤트
녹아웃은 이벤트 내장 바인딩을 통해 모든 이벤트에 대한 바인딩을 지원합니다. 지정된 이벤트에 대한 이벤트 핸들러를 관련 DOM 요소에 추가합니다. 이를 사용하여 정의 된 HTML 이벤트에 바인딩 할 수 있습니다. 이벤트 핸들러 내에서 현재 뷰 모델 데이터 항목, 이벤트 객체 또는 이벤트 바인딩의 일부로 전달 된 사용자 정의 매개 변수에 액세스 할 수 있습니다. 이벤트 바인딩을 사용하려면 이벤트 이름 및 뷰 모델 메소드에 대한 이름 값 쌍이 포함 된 객체 문자 그대로 쉼표로 분리됩니다.
클릭 바인딩은 추측 할 수 있듯이 클릭 이벤트를 처리합니다. 이벤트에 가장 많이 사용되는 바인딩이기 때문에 단순히 이벤트 바인딩의 바로 가기입니다.
.// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>
제출 바인딩은 양식 요소에 대한 제출 이벤트를 처리하기위한 바로 가기입니다. 양식에 제출 바인딩을 사용하면 녹아웃은 해당 양식에 대한 브라우저의 기본 제출 조치를 방지합니다. 다시 말해, 브라우저는 핸들러 기능을 호출하지만 서버에 양식을 제출하지 않습니다. 제출 바인딩을 사용할 때 일반적으로 뷰 모델의 인터페이스로 일반 HTML 양식이 아닌 뷰 모델의 인터페이스를 사용하기 때문에 일반적으로 유용한 기본값입니다. 양식이 일반적인 HTML 양식처럼 제출하도록하려면 제출 처리기에서 true를 반환하십시오.
양식에 제출을 사용하는 대신 제출 버튼을 클릭 할 수 있습니다. 그러나 제출 구속력을 사용하면 텍스트 상자에 입력하는 동안 Enter 키를 누르면 양식을 제출하기 위해 대체 방법을 사용하면 이점이 있습니다.
제어 ui
가시적 결합은 결합 매개 변수 값에 기초하여 관련 요소의 가시성을 설정합니다. 바인딩은 모든 매개 변수를 부울 값으로 변환하려고 시도합니다. Knockout의 눈에 보이는 바인딩은 True 또는 False로 평가하는 속성에 묶여 있어야합니다. 이는 CSS를 사용하여 정의한 디스플레이 스타일보다 우선합니다.
.
바인딩 활성화/비활성화 공급 된 값에 따라 관련 요소의 비활성화 된 속성을 설정합니다. 이것은 일반적으로 입력, Select 및 Textarea와 같은 형태 요소에 사용됩니다. 녹아웃은 내장 바인딩을 제공하여 입력 요소를 활성화하고 비활성화합니다. 활성화 바인딩은 부동산이 True로 평가할 속성이있는 경우 입력 요소를 활성화하고 False로 평가하는 경우 요소를 비활성화합니다. 비활성화 된 바인딩은
반대입니다
확인란 및 라디오 버튼을 다루는
확인란은 녹아웃의 검사 된 바인딩에 바인딩 될 수 있습니다. 점검 된 바인딩은 참 또는 거짓으로 평가하는 속성 또는 표현에 결합되어야합니다. 보기 모델 속성은 관찰 가능한 것으로 정의되므로 소스 속성이 변경 될 때 확인란이 업데이트됩니다. 마찬가지로, 사용자가 확인란을 확인하거나 선택 취소하면 뷰 모델 속성에서 값이 업데이트됩니다. 이 바인딩은 확인 된 무선 버튼 및 확인란의 상태를 설정합니다. 확인란의 경우 바인딩은 매개 변수를 부울 값으로 변환하려고 시도합니다. 라디오 버튼의 경우 바인딩은 버튼 값 속성을 바인딩 매개 변수와 비교합니다.// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>
드롭 다운 목록 생성
드롭 다운 목록에는 항목 목록을로드하고, 값을 표시하고, 다른 키 값을 사용하고, 사용자 선택을 저장하는 몇 가지 중요한 속성이 있습니다. 녹아웃은 이들 각각에 대한 내장 바인딩을 제공합니다. 옵션 바인딩 드롭 다운 목록 요소에 나타날 옵션을 설정합니다. 값은 배열이어야합니다. 이 바인딩은 요소 이외의 다른 방법으로 사용할 수 없습니다. 다중 선택 목록의 경우 선택한 옵션 중 하나를 설정하거나 선택한 옵션 중 어느 것을 읽으려면, 선택된 옵션 바인딩을 사용하십시오. 단일 선택 목록의 경우 값 바인딩을 사용하여 선택한 옵션을 읽고 쓸 수도 있습니다.
옵션 바인딩은 일반적으로보기 모델의 배열 속성에서 표시 할 값 목록을 식별합니다.
selectedOptions 바인딩 컨트롤은 다중 선택 목록의 요소가 현재 선택되고 있습니다. 사용자가 멀티 선택 목록에서 항목을 선택하거나 선택하지 않으면 뷰 모델의 배열에 해당 값을 추가하거나 제거합니다.
때로는 드롭 다운 목록에 하나의 값을 표시하려고하지만 사용자가 목록에서 항목을 선택할 때 다른 값을 사용합니다. Knockout의 내장 OptionStext 및 OptionValue 바인딩 도움말. OptionStext 바인딩은 옵션 바인딩에서 드롭 다운 목록에 표시하기 위해 속성의 문자열 이름으로 설정됩니다. 옵션 value 바인딩은 속성의 문자열 이름으로 설정되어 드롭 다운 목록에서 항목의 선택한 값에 바인딩됩니다. OptionsCaption은 기본적으로 Prticular 옵션을 선택하지 않으려는 경우 유용합니다. 이 매개 변수는 옵션 목록 위에‘항목 선택…’과 같은 텍스트를 설정하고 특정 항목이 선택되지 않은 경우 표시합니다.
그리고 그게 전부입니다. 다음 주에 같은 시간에 피날레를 계속 지켜봐주십시오!
knockoutjs 에 대해 자주 묻는 질문
Knockoutjs와 기타 JavaScript 라이브러리의 차이점은 무엇입니까?
<span data-bind="text: msg, visible: toggle"></span> Knockoutjs는 개발자가 깨끗한 기본 데이터 모델로 풍부하고 반응 형 디스플레이 및 편집기 사용자 인터페이스를 만들 수 있도록 돕는 JavaScript 라이브러리입니다. 다른 JavaScript 라이브러리와 달리 Knockoutjs는 모델과보기가 분리되는 MVVM (Model-View-ViewModel) 설계 패턴을 사용하여 복잡한 데이터 중심 인터페이스를보다 쉽게 관리 할 수 있습니다. 또한 데이터 모델이 변경되고 UI의 일부를 데이터 모델에 연결하기위한 선언적 바인딩을 제공 할 때 자동 UI 새로 고침을 제공합니다. Knockoutjs는 데이터 바인딩을 어떻게 처리합니까?
Knockoutjs는 시스템을 사용합니다. UI의 일부를 데이터 모델에 연결하기위한 선언 적 바인딩. 즉, 이해하기 쉬운 방식으로 HTML 요소에 데이터를 쉽게 바인딩 할 수 있습니다. 데이터 모델이 변경되면 Knockoutjs는 UI의 관련 부분을 자동으로 업데이트하여 수동 DOM 조작이 필요하지 않습니다. Knockoutjs가 다른 JavaScript 라이브러리와 함께 작동 할 수 있습니까? 예, Knockoutjs는 다른 JavaScript 라이브러리와 함께 작동 할 수 있습니다. 그것은 당신의 기술 스택의 나머지 부분에 대해 아무런 가정하지 않으므로 jQuery, bootstrap 또는 angularjs와 같은 다른 라이브러리 또는 프레임 워크와 통합 될 수 있습니다. Knockoutjs는 CSS 바인딩을 어떻게 처리합니까?
Knockoutjs는 'CSS'바인딩을 제공하여 관련 DOM 요소에 하나 이상의 명명 된 CSS 클래스를 추가하거나 제거 할 수 있습니다. 이 바인딩은 일부 데이터 조건에 따라 CSS 클래스를 요소에 조건부로 적용하려는 경우 특히 유용합니다. Knockoutjs의 관찰 가능한 것은 무엇입니까?
관찰 가능한 것은 가입자에게 알릴 수있는 특수한 JavaScript 객체입니다. 변경 사항에 대해 자동으로 종속성을 감지합니다. 이 기능은 데이터 모델이 변경 될 때마다 라이브러리가 UI의 올바른 부분을 자동으로 업데이트 할 수있게되므로 Knockoutjs의 기본입니다. 서버 측 기술과 함께 Knockoutjs를 어떻게 사용할 수 있습니까?
Knockoutjs는 모든 서버 측 기술에서 사용할 수 있습니다. 사용하는 서버 측 언어에 비례 적이므로 PHP, .NET, Java, Ruby, Python 또는 기타 서버 측 언어와 함께 사용할 수 있습니다. JSON 데이터를 클라이언트에 보내야 한 다음 Knockoutjs를 사용 하여이 데이터를 HTML에 바인딩하면 Knockoutjs가 양식 검증을 처리하는 방법은 무엇입니까? Knockoutjs 자체는 내장 된 정보를 제공하지 않습니다. 검증 메커니즘. 그러나 Knockoutjs에서 양식 검증을 위해 특별히 설계된 별도의 플러그인 인 JQuery Validation 또는 Knockout-Validation과 같은 다른 검증 라이브러리와 쉽게 통합 될 수 있습니다. 모바일 앱 개발에 Knockoutjs를 사용할 수 있습니까?
Knockoutjs는 주로 웹 개발을 위해 설계되었지만 PhoneGap 또는 Cordova와 같은 다른 기술과 함께 모바일 앱 개발에도 사용할 수 있습니다. HTML, CSS 및 JavaScript를 사용하여 기본 앱을 만들려면 Knockoutjs가 이벤트 처리를 어떻게 처리합니까? Knockoutjs는 사용자의 클릭 이벤트에 응답 할 수있는 '클릭'바인딩을 제공합니다. 또한‘이벤트’,‘제출’,‘활성화’,‘비활성화’,‘Hasfocus’등과 같은 다른 이벤트 바인딩도 제공합니다. 이러한 바인딩은 선언적 인 방식으로 사용자 상호 작용을 쉽게 처리 할 수있게합니다. Knockoutjs는 대규모 응용 프로그램에 적합합니까?
예, Knockoutjs는 소규모 및 대규모 애플리케이션 모두에 적합합니다. MVVM 설계 패턴은 복잡한 데이터 중심 인터페이스를보다 쉽게 관리 할 수 있으며, 관찰 및 바인딩 시스템은 대규모 응용 프로그램의 경우에도 코드를 구성하고 유지 관리 할 수 있도록 도와줍니다.
