負載淘汰賽組件動態

這是我的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(); 
})

它工作正常

來源

2015-11-11 Nika Javakhishvili

你必須認識到，調用'applyBindings當淘汰賽將只需要到DOM任意變化考慮進去（）'。儘管你可以嘗試在'hashchange'事件中調用'ko.cleanNode（document.body）'然後'ko.applyBindings（）'。 – haim770

謝謝你的工作 –

你能解釋一下，基於哈希變化來建立大型單頁面應用的最佳方式是什麼？ –

更換車身HTML是要離開的一切綁定。你不應該使用cleanNode;這是一個雜食。

如果要更改正在使用哪個組件，請在包含標籤上使用component binding（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>

來源

2015-11-11 16:42:51

不錯的解決方案，謝謝。 –

負載淘汰賽組件動態

回答

相關問題