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 и не отображаются.

0 ответов

Другие вопросы по тегам