Синтаксис Knockout.js

Question

Я новичок в Javascript MVC Framework Knockout.js

Исходя из обычного Javascript (и некоторого опыта jQuery), я испытываю трудности в понимании изучения синтаксиса Knockout.js

Рассмотрим приведенную ниже статистику;

Вид:

<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li></ul>

Просмотр модели:

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };    
};

Не могли бы вы объяснить, что делают операторы (в частности, $ data, $ root)? И что делает утверждение self.chosenFolderId(folder);?

Answer 1

Ключевые слова $ data и $ root обычно используются KO.Когда вы используете foreach для массива (привязка данных), KO создает один <li> для каждого элемента в массиве.

В этом случае $ data является текущим элементом массива (например, папки [i]).) и $ root является родительским элементом.Папки для вас - это поле вашей ViewModel: $ data = текущие папки на итерации (viewModel.folder [i]) $ root = viewModel

self.chosendFolderId (папка) выполняет ваш метод viewModel selectedFolderId.Код использует self для сохранения значения viewModel, потому что в функции ключевое слово "this" - это не viewModel, а отправитель метода.Это закрытие.

Редактировать: ключевое слово $ parent - это уровень previus дерева.Ключевое слово $ root - это уровень верхнего дерева.

viewModel {
  topObjects : ko.observableArray()
}

viewModel.topObjects.push({
  Objects : ko.observableArray()
});

Если мы создаем foreach для viewModel.topObjects.Objects, $ parent - это topObjects, $ root - это viewModel.

СпасибоTjorriemorrie; -)

Answer 2

Отвечая на ваш вопрос о self.chosenFolderId(folder)

Он записывает значение в chosenFolderId наблюдаемый.Значение аргумента "folder" фактически является текущим значением $data.

Answer 3

По вашему вопросу:

что делают утверждения (в частности $data, $root)?

$data: представляет текущую модель просмотра. Это полезно внутри foreach циклов. Например, если у нас есть коллекция студентов, и мы повторяем эту коллекцию, $data дает нам текущий экземпляр студента. Так что мы можем использовать $data для получения различных свойств объекта ученика, таких как name, class и т. Д.

$root: Это корневая модель представления, самый высокий контекст в иерархии. Таким образом, через $root вы можете получить доступ к свойствам верхнего уровня.

Answer 4

Если вы попытаетесь изменить ссылку с self на this (что тоже самое) в предоставленном коде, то выбор css не будет работать.Кто-нибудь знает почему?

this.goToFolder = function(folder) { this.chosenFolderId(folder); };