KnockoutJS'deki değişken $ verilerinin kaynağı ve amacı nedir?

Question

KnockoutJS tutorials$data açıklanamaz bir değişken içeren aşağıdaki kod örneği üzerinde tökezledim.

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> 

Görünüm Modeli (JavaScript):

öğretici bu $data devreye girer dolar işareti kullanılır ve ne herhangi bir açıklama içermez

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

dan. $data değişkeni tanımlanmadı ve $data üç örneğinin tümünü $foobar olarak yeniden adlandırdığımda, örnek artık çalışmıyor.

Burada nasıl bir büyü var?

Answer 1

$data değişkeni, bağlı olan geçerli nesneyi ifade etmek için kullanılan yerleşik bir değişkendir. Örnekte bu, viewModel.folders dizisindeki öğelerden biridir.

Answer 2

$ data, Knockout's Binding Contexts'un bir parçasıdır. içinde

• $ ebeveyn
• $ veliler
• $ kök
• $ bileşeni
• $ veri
• $ indeksi (yalnızca: Burada

  tüm yerleşik değişkenlerdir foreach bağlamaları)

• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 3

ben

.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/