Привязка массивов
Параметр foreach позволяет привязать массив к элементу разметки html. Например, пусть ViewModel представляет массив:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
</head>
<body>
<ul data-bind="foreach: phones">
<li data-bind="text: $data"></li>
</ul>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
var viewModel ={
phones: ["iPhone 6S", "LG G5", "Lumia 950", "Nexus 6P"]
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Следует отметить, что в данном случае привязка устанавливается как для элемента <ul>, так и для вложенного элемента
<li>. Список ul использует привязку в стиле "foreach". То есть фактически в этом элементе в цикле foreach будут перебираться
все элементы массива.
А каждый элемент списка <li> привязан к параметру $data, который указывает на текущий перебираемый объект.
Но рассмотрим чуть более сложный пример привязки массивов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
</head>
<body>
<ul data-bind="foreach: phones">
<li>
<p data-bind="text: name"></p>
<p data-bind="text: company"></p>
</li>
</ul>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
var viewModel ={
phones: [
{
name: "iPhone 6S",
company: "Apple"
},
{
name: "Lumia 950",
company: "Microsoft"
},
{ name:"Nexus 6P",
company: "Huawei"
}]
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
В данном случае каждый элемент массива представляет сложный объект. При привязке этого массива элементе ul:
<ul data-bind="foreach: phones">
вложенные элементы li оказываются привязанными к отдельным объектам.
Поскольку текущий перебираемый объект можно получить через параметр $data, то мы также можем переписать привязку к элементу li следующим образом:
<li> <p data-bind="text: $data.name"></p> <p data-bind="text: $data.company"></p> </li>
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером