knockoutJS 학습노트 07: 컨텍스트 바인딩

바인딩 컨텍스트란 현재 바인딩(dat-bind)에 사용되는 객체(ViewModel)입니다.단일 대상이 귀속된 상황에서 이해하기 쉽지만 대상은 복잡한 유형일 수 있고 여러 층을 끼워 넣을 수 있다. 이때 각 층마다 자신의 상하문 대상이 있기 때문에 이해하기가 쉽지 않다.ko는 상하문 키워드를 통해 차원 간의 관계를 더욱 뚜렷하게 하고 상호 방문을 더욱 간단하게 한다.
1. $data와 $index
전편에서는 Observable Array와template를 소개했는데 보통 우리는 대상 속성을 통해 귀속한다. 예를 들어 데이터-bind="text: 속성 이름";그러나 만약에 수조가 단순한 형식일 뿐이라면 예를 들어 ["tom", "jack", "lucy"]는 이때 ko의 몇 개의 상하문으로 실현할 수 있다.
$데이터는 현재 대상을 표시합니다.다음 $data는 개인 대상을 표시합니다.

    <p>  ：<span data-bind="text:$data.name"></span>，  ：<span data-bind="text:$data.age"></span></p>
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    var person = new Person("tom",18);
    ko.applyBindings(person);

["tom", "jack", "lucy"] 수조에 대해 $data는 모든 항목의 값입니다.
$index는 현재 아래 첨자를 나타냅니다.예:

    <ul data-bind="foreach:arr">
        <li><span data-bind="text:$index"></span>:<span data-bind="text:$data"></span></li>
    </ul>
    var arr = ["tom","jack","lucy"];
    ko.applyBindings(arr);

2. $parent, $parents, $root
$parent 는 부모 ViewModel을 나타냅니다.예를 들면 다음과 같습니다.

    <ul data-bind="foreach:data">
        <li>
            <p data-bind="text:name"></p>
            <ul data-bind="foreach:contains">
                <li>
                    <p><span data-bind="text:name"></span>  <span data-bind="text:$parent.name"></span></p>
                </li>
            </ul>
        </li>
    </ul>
    var data = [
        {name:"  ",contains:[{name:"  ",work:"     "},{name:"  ",work:"     "}]},
        {name:"  ",contains:[{name:"  ",work:"     "},{name:"  ",word:"     "}]}
    ];  

내부의ul의 ViewModel은contains 대상입니다. 이전에 우리는 as가 지정한 별명으로 데이터[i]의name 속성에 접근했습니다. 여기도 $parent를 통해 직접 접근할 수 있습니다.name 최상위 ViewModel의 name 속성에 액세스합니다.
$parents는 모든 상위 ViewModel 컬렉션을 나타냅니다.이것은 $parents[0]가 바로 부모 ViewModel, 즉 $parent;$입니다.parenrs[1]는 바로 아버지의 아버지 ViewModel...
$root은 루트 ViewModel을 나타냅니다.위의 예에서 $parent와 $root는 데이터 대상을 나타냅니다.첫 번째 예에서, 만약 이 때가 루트라면, $root와 $data는 같다.
3. $parentContext
상부의 구체적인 데이터를 표시합니다. $parent는 부모 ViewModel, $parentContext.$데이터는 이 ViewModel에 접근할 수 있습니다.부모 $index를 얻으려면 $parentContext.$를 통과해야 합니다index.
위드 키워드
현재 컨텍스트를 지정합니다. 예를 들면 다음과 같습니다.

    <div data-bind="with:info">
        <p data-bind="text:name"></p>
        <p data-bind="text:age"></p>
    </div>

이렇게 하면 항상 info를 쓸 필요가 없다.name,info.age는 데이터가 복잡할 때 코드를 간략하게 쓸 수 있습니다.
다섯째, 총결산
이상은 ko 상하문에서 자주 사용하는 몇 가지 키워드입니다. $data, $index, $parent, $root는 복잡한 데이터 형식에 특히 유용합니다.with 키워드는 속성이 많을 때 코드를 간략하게 쓸 수 있으며 현재 상하문을 가리키며 의미를 더욱 명확하게 하고 읽기에 편리하다.