извлечение информации из массива с использованием нокаута

Question

У меня в настоящее время массив передается в мою функцию, и я хотел вытащить информацию из массива, чтобы я мог отображать ее на странице.

Это то, что массив выглядит следующим образом:

EducationalClasses:[object, object] 

first object contains: 
    classId: "324342", 
    className: "English 101" 
second object contains: 
    classId: "231243", 
    className: "Reading" 

когда я делаю educationalClasses [0] я получить результаты, как и в первом объекте. Я хотел бы создать какую-то петлю так, что в моей странице просмотра, когда у меня есть:

<!-- ko foreach: educationalClasses --> 
    <div data-bind="text: className></div> 
<!--/ko--> 

я хотел бы получить английский 101 и чтение отображается

Это то, что у меня есть мой ViewModel:

viewModel = function(educationalClasses){ 
    .... 
    self.className= ko.observable(educationalClasses.className); // what i want 
} 

Как я могу сделать это правильно и так, что все элементы массива отображаются без меня использовать educationalClasses[0].className...educationalClasses[1].className

Answer 1

Технически, вам не нужен какой-либо наблюдаемый п или что вы здесь делаете. Вам просто нужна ваша модель просмотра, чтобы иметь член с именем educationalClasses, который является массивом (или наблюдаемым массивом). Вы можете просто обернуть свои необработанные данные в объект, пометить его, и это произойдет.

Если вы хотите изменить массив и посмотреть, как показывают обновления, вам понадобится observableArray. Если вы хотите, чтобы изменения отображались в отдельных элементах данных, вы также хотели бы, чтобы они были наблюдаемыми.

rawData = [{ 
 
    classId: "324342", 
 
    className: "English 101" 
 
}, { 
 
    classId: "231243", 
 
    className: "Reading" 
 
}]; 
 

 

 
viewModel = function(educationalClasses) { 
 
    return { 
 
    educationalClasses: educationalClasses 
 
    }; 
 
}; 
 

 
ko.applyBindings(viewModel(rawData));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<!-- ko foreach: educationalClasses --> 
 
<div data-bind="text: className"></div> 
 
<!--/ko-->