Nguồn gốc và mục đích của biến $ data trong KnockoutJS là gì?

Question

Trong KnockoutJS tutorials Tôi tình cờ gặp ví dụ mã sau có chứa biến không thể giải thích $data.

The View (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> 

The View Model (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); 

Các hướng dẫn không chứa bất kỳ lời giải thích những gì mà ký hiệu đô la được sử dụng cho và nơi $data này do thỏa thuận từ. Biến số $data không được xác định và khi tôi đổi tên cả ba phiên bản $data thành $foobar, ví dụ này không hoạt động nữa.

Loại phép thuật nào đang diễn ra ở đây?

Answer 1

Biến số $data là biến được tạo sẵn dùng để chỉ đối tượng hiện tại bị ràng buộc. Trong ví dụ này là một trong các phần tử trong mảng viewModel.folders.

Answer 2

$ dữ liệu là một phần của Knockout's Binding Contexts.

Dưới đây là tất cả được xây dựng trong các biến:

• $ mẹ
• $ cha mẹ
• $ root
• $ phần
• $ data
• $ index (chỉ có sẵn trong foreach bindings)
• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 3

tôi đã làm cho nó hoạt động

.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); 

xin hãy xem http://jsfiddle.net/bowen31337/48RDd/