CanJS Live Binding с ленивой загрузкой компонентов не работает
Я использую headJs для ленивой загрузки скриптов. Для простоты, скажем, у меня есть 3 компонента: макет-компонент (тег: custom-layout), custom1-компонент (тег: custom-one) и custom2-component(тег: custom-two).
index.html
<button class="one">One</button>
<button class="two">Two</button>
{{#is layout 'user'}}
<custom-layout page="{state.page}"></custom-layout>
{{/is}}
app.js
var state = new can.Map.extend({page : '', layout: 'user'})
// on some action I can set the page to 'one' or 'two, like so
$('button').on('click', function(e){
if ($(e.target).hasClass('one')) {
head.load(['custom1-component.js'], function(){
state.attr('page', 'one')
})
}
else if ($(e.target).hasClass('two')) {
head.load(['custom2-component.js'], function(){
state.attr('page', 'two')
})
}
})
топологий component.js
can.Component.extent({
tag : 'custom-layout',
tempate : can.view('custom-layout.stache')
})
заказ layout.stache
{{#is page 'one'}}
<custom-one></custom-one>
{{/is}}
{{#is page 'two'}}
<custom-two></custom-two>
{{/is}}
Итак, изначально я установил макет "пользователь" для простоты. При загрузке пользовательский макет уже загружен и исполняется. Однако на данный момент нет загруженных компонентов custom-one или custom-two. По нажатию кнопки я загружаю определения компонентов и соответствующим образом изменяю значение страницы. Проблема в том, что custom-one и custom-two распознаются как компонент can и не отображаются.