0

我正在使用 headJs 来延迟加载脚本。为简单起见，假设我有 3 个组件，layout-component(tag : custom-layout)、custom1-component(tag : custom-one) 和 custom2-component(tag : custom-two)。

索引.html

<button class="one">One</button>
<button class="two">Two</button>
{{#is layout 'user'}}
    <custom-layout page="{state.page}"></custom-layout>
{{/is}}

应用程序.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')
        })
    }
})

布局组件.js

can.Component.extent({
    tag : 'custom-layout',
    tempate : can.view('custom-layout.stache')
})

自定义布局.stache

{{#is page 'one'}}
    <custom-one></custom-one>
{{/is}}
{{#is page 'two'}}
    <custom-two></custom-two>
{{/is}}

因此，为了简单起见，最初我将布局设置为“用户”。在加载时，自定义布局已经被获取并执行了 stache。但是，此时没有加载自定义一或自定义二组件。单击按钮时，我会加载组件定义并适当地更改页面值。问题是 custom-one 和 custom-2 被识别为 can 组件并且不渲染。

4

0 回答 0