Каково происхождение и назначение переменной $data в KnockoutJS?

#javascript #html #knockout.js

#javascript #HTML #knockout.js

Вопрос:

В уроках 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 , пример больше не работает.

Что за магия здесь происходит?

Ответ №1:

$data является частью контекстов привязки Knockout.

Вот все встроенные переменные:

$parent
$parents
$root
$component
$data
$index (доступен только в привязках foreach)
$parentContext
$RawData
$componentTemplateNodes

Ответ №2:

$data Переменная — это встроенная переменная, используемая для ссылки на текущий привязываемый объект. В примере это один из элементов viewModel.folders массива.

1. Спасибо за ваше краткое объяснение. Значит $data , переменная существует только тогда, когда foreach используется a ?

2. Вы также можете указать ее значение, используя параметр data в объявлении шаблона. Кроме того, если ни параметр data, ни foreach не присутствуют, по умолчанию используется вся модель представления для шаблона

3. Существуют ли какие-либо другие встроенные переменные?

4. Они действительно должны были объяснить это

Ответ №3:

я заставил это работать

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