KnockoutJS에서 $ data 변수의 기원과 목적은 무엇입니까?

KnockoutJS에서 $ data 변수의 기원과 목적은 무엇입니까?

---

에서 KnockoutJS 자습서 나는 설명 할 수없는 변수를 포함하는 다음 코드 예제를 만났다 $data.

보기 (html) :

<!-- Folders -->
<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul>
<script type="text/html" id="folderTemplate">
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },
                   click: function() { mailViewModel.selectFolder($data) }">
        ${$data}
    </li>    
</script>

보기 모델 (JavaScript) :

var viewModel = {
    // Data
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    selectedFolder: ko.observable('Inbox'),

    // Behaviours
    selectFolder: function (folder) {
        this.selectedFolder(folder);
    }    
};

window.mailViewModel = viewModel;
ko.applyBindings(viewModel);

이 튜토리얼에는 달러 기호의 용도와 출처에 대한 설명이 포함되어 있지 않습니다 $data. 변수는 $data어디에도 정의되지 않은 나는 모든 세 개의 인스턴스 이름을 바꿀 때 $data까지를 $foobar, 예는 더 이상 작동하지 않습니다.

여기서 무슨 마술이 일어나고 있습니까?

---

$data변수 내장 현재 오브젝트를 참조하기 위해 사용되는 변수를 결합한다. 예제에서 이것은 viewModel.folders배열 의 요소 중 하나입니다 .

---

$ data는 Knockout의 Binding Contexts의 일부입니다 .

다음은 모든 기본 제공 변수입니다.

• $ 부모
• $ 부모
• $ root
• $ 구성 요소
• $ data
• $ index (foreach 바인딩 내에서만 사용 가능)
• $ parentContext
• $ rawData
• $ componentTemplateNodes

---

나는 그것을 작동시켰다

.selected {
    color:red;
}

<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul>
<script type="text/html" id="folderTemplate">
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },text:$data,
                   click: function() { mailViewModel.selectFolder($data) }">
    </li>    
</script>

var viewModel = {
    // Data
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    selectedFolder: ko.observable('Inbox'),

    // Behaviours
    selectFolder: function (folder) {
        this.selectedFolder(folder);
    }    
};

window.mailViewModel = viewModel;
ko.applyBindings(viewModel);

http://jsfiddle.net/bowen31337/48RDd/를 보세요

참고 URL : https://stackoverflow.com/questions/7838853/what-is-the-origin-and-purpose-of-the-variable-data-in-knockoutjs