[Javascript] KnockoutJS中變量$ data的起源和目的是什麼?


Answers

$ data是Knockout的Binding Contexts的一部分

以下是所有內置變量:

  • $父
  • $父母
  • $根
  • $組件
  • $數據
  • $ index(僅在foreach綁定中可用)
  • $ parentContext
  • $ RAWDATA
  • $ componentTemplateNodes
Question

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 ,該示例不再起作用。

這裡發生了什麼樣的魔法?




Links