Исправленный вопрос и пример
Я пытаюсь связать компоненты Knockout после первоначального ko.applyBindings();
, чтобы динамически добавлять пользовательские элементы.
В моем исходном сообщении я упомянул загрузку содержимого с помощью ajax, но моя проблема возникает, когда пользовательские элементы добавляются в DOM, используя что-то вроде jQuery append
.
Вот пример:
$(function() {
// Register a simple widget:
ko.components.register('like-widget', {
template: '<div class="alert alert-info">This is the widget</div>'
});
// Apply bindings
ko.applyBindings();
// Wire up 'add' button:
$('#btnAdd').on('click', function() {
$('#addZone').append("<like-widget></like-widget>");
});
});
<link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; return false;" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<body>
Here a widget, declared inline:
<like-widget></like-widget>
<button id='btnAdd'>Add a new widget to the grey box:</button>
<br/><br/>
<div id='addZone' class="well">
Widgets will be appended here
</div>
<p>When you run this code, the widget custom element is indeed added to the box (see source) but the widget template is not bound, so nothing appears. How do I get it to bind/appear?</p>
</body>