Question

我正在使用headJs来延迟加载脚本。为简单起见，我说我有3个组件，layout-component（标签：custom-layout），custom1-component（标签：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}}

所以最初我将布局设置为'user'以简化。在加载时，已经获取了自定义布局并执行了stache。但是，此时没有加载自定义一个或自定义两个组件。单击该按钮，我加载组件defs并适当地更改页面值。问题是custom-one和custom-two被识别为可以组件而不会呈现。

CanJS Live绑定与延迟加载的组件不起作用

0 个答案: