Knockout 빠른 시작 - 5: 당신이 알아야 할 최고의 기능 계속

Utilities

Knockout은 당신이 개발할 때 사용할 수 있는 많은 도구를 제공합니다. 당신은 ko에서 사용할 수 있습니다.utils 네임스페이스에서 찾을 수 있습니다. 가장 좋아하는 도구는 다음과 같습니다.

extend: 이 방법은 두 대상을 한데 합친다. 이 방법을 사용하면 두 번째 대상의 모든 속성을 첫 번째 대상에 합친다.

unwrapObservable: 이 방법은 속성을 매개 변수로 가져와 값을 되돌려줍니다.예를 들어 Knockout의 Observable 속성 또는 간단한 속성입니다.이 함수는 실행할 때 대상의 실제 가치를 얻기를 원할 때 매우 유용하다.

모든 그룹 도구: Knockout은 데이터 작업에 대한 많은 도구를 제공합니다. 필터를 하거나 비추거나 항목을 삭제할 수 있습니다.나는 항상 프로젝트를 시작할 때 이런 방법들을 ko에 부가한다.observableArray.fn에.

다음 코드는 사용 방법을 보여 준다.

// extend usage
var a = { val: 1 },
b = { val: 2 };

ko.utils.extend(a, b);
console.log(a.val); // console: 2

// unwrapObservable usage
var c = ko.observable(99), d = 98;
console.log(ko.utils.unwrapObservable(c)); // console: 99
console.log(ko.utils.unwrapObservable(d)); // console: 98

// array "map" utility function usage
var arr = [100, 101];
var mapped = ko.utils.arrayMap(arr, function (item) {
    return item + 50;
})

console.log(arr); // console: [ 150, 151 ]

Data-bind statements

Knockout의 스크립트 라이브러리에 주목해 왔습니다. 실제로 Knockout은 자바스크립트 대상을 HTML에 간단하게 연결할 수 있도록 설계되었습니다.API는 HTML5와 호환되는 데이터-bind 구문을 사용합니다.앞의 예시에서 HTML 요소의 속성을 ViewModel의 속성에 간단하게 연결할 수 있습니다.데이터-bind 문법은 쉼표로 구분된 귀속 정의를 사용할 수 있으며, 아래의 예는 사용 방식을 보여 줍니다.

<span data-bind="text: myText"></span>
<div data-bind="visible: isVisible, with: someProp"></div>
<input data-bind="value: someVal,
    css: {
        'error': !someVal.isValid(),
        'success': someVal.isValid()
    }"/>

Applying bindings

applyBindings는 Knockout의 모든 작업이 시작되는 출발점입니다.대부분의 예에서는 ViewModel을 매개변수로 사용하는 방법을 보여 줍니다.그러나 두 번째 인자로 DOM 대상을 지정할 수 있습니다. Knockout은 이 DOM 노드와 하위 노드에만 연결됩니다.
대부분의 응용 프로그램은 하나의 View 모델만 있고 apply Binding을 호출할 때도 하나의 View 모델 매개 변수만 전달한다.그러나 나는 많은 복잡한 응용 프로그램을 만들었는데 한 페이지에 여러 개의 ViewModel 대상을 사용했고 여러 개의 ViewModel의 각각의 처리 알림, 설정, 그리고 현재 사용자의 정보 등을 사용했다.이러한 상황에서 Knockout이 바인딩된 노드의 수를 제한함으로써 성능의 장점을 얻을 수 있다.만약 페이지의 일부 내용만 업데이트할 필요가 있다면, Knockout을 통해 전체 페이지에 연결하지 마십시오.

Binding handlers

나는 일찍이 Knockout이 많은 확장점을 제공했다고 언급한 적이 있다.Knockout의 Binding handler보다 더 편리한 경우도 있습니다.데이터-bind 문법을 통해 bindinghandler를 실현했지만.Knockout은 연결된 프로세서를 사용자 정의할 수 있기 때문에, 사용자 정의 기능을 실행하거나, 다시 쓸 수 있습니다.
MVVM 스타일의 개발에서 우리는 두 가지 유형의 귀속이 있는데 그것이 바로 단방향과 양방향 귀속이다.단방향 귀속은 간단한 정보 읽기입니다. ViewModel의 데이터를 읽어서 DOM에 귀속시킵니다.양방향 데이터 연결은 단방향의 기초 위에서 DOM 대상의 업데이트를 ViewModel의 속성으로 되돌려주는 것이라고 상상할 수 있다.Knockout에서 모든 종류의 바인딩을 만들 수 있습니다. 다음 코드는 기본 프로세서의 사용을 보여 줍니다.

ko.bindingHandlers['myHandler'] = {
    init: function (element, valueAccessor, allBindingsAccessor,  viewModel, bindingContext) {
    },

    update: function (element, valueAccessor, allBindingsAccessor,    viewModel, bindingContext) {

    }
};

보시다시피 우리는 우리의 논리를 실현하기 위해 두 개의 갈고리를 제공했다.Init 및 업데이트 함수.이러한 함수의 매개변수는 다음과 같습니다.

element: 데이터-bind의 요소를 정의

valueAccessor: ViewModel 바인딩 속성 가치 함수를 반환합니다.Observable 속성에 연결되면, 이 Observalbe로 되돌아갑니다. 처리 논리에서 이 Observable를 upwarp 처리해야 합니다.

allBindingAccessor:valueAccessor와 유사하지만 모든 귀속과 귀속 값을 포함하는 대상을 되돌려줍니다.

viewModel: applyBindings에 전달되는 보기 모델이나 루트 대상

bindingContext: 현재 귀속된 상하문 환경을 나타내는 특정한 정보를 포함하는 특수한 대상입니다.귀속 상하문에 $data 속성이 있습니다. 이 속성은viewModel과 항상 같습니다.그리고 $parent 속성과 $parents 속성은 귀속 요소의 상급 노드를 나타낸다.보통 with를 사용할 때 이 속성을 사용합니다.

너는 이 물건들이 보기에 그리 많지 않은데, 우리가 어디에서 우리의 업무 논리를 실현해야 한다고 생각할 수 있니?init 함수는 apply Binding을 호출할 때만 한 번 호출합니다.Knockout은 DOM 트리 전체를 훑어보고 데이터-bind 문법을 찾아서 처리하고 필요한 귀속에 init 방법을 호출합니다.그리고 init 방법을 호출한 후 업데이트 방법을 즉시 호출합니다. 이후에 귀속이 변할 때 이 방법을 여러 번 호출합니다. (Subscribable일 경우)
내 처리 방식은 init에 내 모든 이벤트 프로세서 (change,blur,focus) 를 등록하고 업데이트에서 HTML을 처리하는 것이다.
다음 코드는 흔히 볼 수 있는 단방향 연결을 보여 줍니다. 이 예는visible과 정반대입니다. 우리는 isVisible이 아닌 isHidden을 사용할 수 있습니다.

// invisible -> the inverse of 'visible'
ko.bindingHandlers['invisible'] = {
    update: function (element, valueAccessor) {
        var newValueAccessor = function () {
            // just return the opposite of the visible flag!
            return !ko.utils.unwrapObservable(valueAccessor());
        };

        return ko.bindingHandlers.visible.update(element,        newValueAccessor);

    }
};

다음 코드는 양방향 연결을 보여 줍니다. 이 예는 하나의 숫자에 대한 검증을 보여 줍니다. 요소에서 데이터를 가져와 ViewModel에 전달하고 ViewModel이 변할 때도DOM에 전달할 수 있습니다.

// simple number parsing
function parseNumber(strVal){
    return parseInt(strVal, 10);
}

// very basic two-way binding handler
ko.bindingHandlers['number'] = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //handle the input changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var number = parseNumber(element.value);
            if (number !== NaN) {
                observable(element.value);
            }
        });
    },

    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var number = parseNumber(value);
        if (number !== NaN) {
            element.setAttribute("value", number);
        }
    }
};

Summary

Knockout은 매우 성숙한 스크립트 라이브러리입니다. 이 부분에서 다음과 같은 내용을 배웠습니다.

Knockout의 핵심 대상과 사용 방식

Knockout의 유틸리티

여러 ViewModel

을 생성하고 관리하는 방법

맞춤형 바인딩 프로세서