动态加载挖空组件

Question

这是我的HTML:

<a href="#page1">page 1</a>
<a href="#page2">page 2</a>

这是我的js:

define(['jquery', 'knockout'], function ($, ko) {


     ko.components.register('page1', {
    require: 'App/Controllers/page1'
});
ko.components.register('page2', {
    require: 'App/Controllers/page2'
});

    window.onhashchange = function () {
        var hash = location.hash.replace('#', '');
        $('#body').html('<' + hash + '></' + hash + '>'); //hash = page1 or page2
    }

    ko.applyBindings();
})

但是,当散列更改时,组件不会加载,主体内容只是: <page1></page1>或第二页.如果我像这样改变我的js:

define(['jquery', 'knockout'], function ($, ko) {

    ko.components.register('page1', {
    require: 'App/Controllers/page1'
});
ko.components.register('page2', {
    require: 'App/Controllers/page2'
});

    $('#body').html('<page1></page1>');

    ko.applyBindings();
})

它工作正常

Answer 1

替换正文html将使所有内容保持未绑定状态.你不应该使用cleanNode; 这是一个kludge.

如果要更改正在使用的组件body,请使用包含所需组件的observable,在包含标记上使用组件绑定(很好).这是一个例子,使用计时器来更改模板.

ko.components.register('page1', {
    template:'page1 template'
});
ko.components.register('page2', {
    template:'page2 template'
});
 
vm = {page:ko.observable('page1')};
ko.applyBindings(vm);

setTimeout(function () {
    vm.page('page2');
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="component: page"></div>