Использую KnockoutJS и Яндекс Карты.
Данные на страницу биндятся, а в балун нет. Можно ли так биндить данные на яндекс карту? Если нет, то какое решение подскажите, может библиотека какая есть?
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Showing pixel and tile coordinates</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type='text/javascript'>
function Note(id, title, content) {
this.id = id;
this.title = title;
this.content = content;
}
Note.LAYOUT = 'привет<br> <span data-bind="$root.hello"></span>' +
'<table class="table table-hover">' +
'<thead>' +
'<tr>' +
'<th>#</th>' +
'<th>Заголовок</th>' +
'<th>Содержимое</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr data-bind="foreach: notes">' +
'<td data-bind="text: id"></td>' +
'<td data-bind="text: title"></td>' +
'<td data-bind="text: content"></td>' +
'</tr>' +
'</tbody>' +
'</table>';
function NoteViewModel() {
var self = this;
self.hello = ko.observable('пока');
self.notes = ko.observableArray([
new Note(0, 'Первая заметка', 'Тут много текста'),
new Note(1, 'Вторая заметка', 'Тут много другого текста')
]);
}
</script>
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Заголовок</th>
<th>Содержимое</th>
</tr>
</thead>
<tbody data-bind="foreach: notes">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: title"></td>
<td data-bind="text: content"></td>
</tr>
</tbody>
</table>
<div id="map"></div>
<script type="text/javascript">
ymaps.ready(init);
var myMap,
myPlacemark;
function init() {
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
myPlacemark = new ymaps.Placemark([55.76, 37.64], {
hintContent: 'Москва!',
balloonContent: Note.LAYOUT
});
myMap.geoObjects.add(myPlacemark);
ko.applyBindings(new NoteViewModel());
}
</script>
</body>
</html>