通过 Jquery Ajax 函数加载后不呈现 KnockoutJS 元素

Question

我已经在 ajax 上加载了侧边栏，但是这个 html 使用 knockoutJS 来完全呈现。我想知道如何执行此代码的 KnockoutJs 部分。

以下内容是通过jQuery ajax函数加载的，其中包含一些敲除元素以及一些X Magento Init类型脚本：

<div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'>
<div class=\"block-title filter-title\" data-count=\"0\">
    <strong data-role=\"title\">Shop By<\/strong>
<\/div>
    <div class=\"block-content filter-content\">
        <strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong>
            <div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'>
                <div data-role=\"collapsible\" class=\"filter-options-item\">
                    <div data-role=\"title\" class=\"filter-options-title\">Category<\/div>
                    <div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\">
                        <li class=\"item\">
                            <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&amp;cat=143&amp;q=ice+machine\">Front of House
                            <span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a>
                        <\/li>
                        <li class=\"item\">
                            <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&amp;cat=182&amp;q=ice+machine\">Bar Supplies
                            <span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a>
                        <\/li>
                        <li class=\"item\">
                            <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&amp;cat=257&amp;q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n 
                            items                        <\/span><\/span>\n       
                            <\/a>\n                    <\/li>\n 
                            <li class=\"item\">\n                    
                            <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&amp;cat=342&amp;q=ice+machine\">\n           
                            Warewashing                                            <span class=\"count\">\n                        
                            3                        <span class=\"filter-count-label\">\n           
                            items                        <\/span><\/span>\n                     
                            <\/a>\n                    <\/li>\n            <li class=\"item\">\n         
                            <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&amp;cat=521&amp;q=ice+machine\">\n          
                            Catering Equipment Offers                                            <span class=\"count\">\n                            1         
                            <span class=\"filter-count-label\">\n                                                    item                        <\/span><\/span>\n         
                            <\/a>\n                    <\/li>\
                            <\/ol>
                            <\/div>\n                    
                            <\/div>\n                                                        
                            <div data-role=\"collapsible\" class=\"filter-options-item\">                
                            <div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n    

                            <div data-role=\"content\" class=\"filter-options-content\">
                                <div data-bind=\"scope: 'brandFilter'\">
                                    <!-- ko template: getTemplate() --> <!-- \/ko -->
                                <\/div>
                                <script type=\"text\/x-magento-init\">
                                    {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\/js\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\/\\/www.domain.com\\/catalog\\/navigation_filter\\/ajax\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n                    <\/div>\n                                                                                                                                                                                                                                                                                        <div data-role=\"collapsible\" class=\"filter-options-item\">\n                        <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n                        <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n    <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n    {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\/js\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\/\\/www.domain.com\\/catalog\\/navigation_filter\\/ajax\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n                    <\/div>\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div data-role=\"collapsible\" class=\"filter-options-item\">\n                        <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n                        <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n    <div data-role=\"from-label\"><\/div>\n    <div data-role=\"to-label\"><\/div>\n    <div data-role=\"slider-bar\"><\/div>\n    <div class=\"actions-toolbar\">\n        <div data-role=\"message-box\"><\/div>\n        <div class=\"actions-primary\">\n            <a class=\"action primary small\" data-role=\"apply-range\">\n                <span>OK<\/span>\n            <\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n    { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\/\\/www.domain.com\\/catalogsearch\\/result\\/index\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1} 
                                    } }
                                <\/script>
                            <\/div>
                <\/div>
            <\/div>
        <\/div>
    <\/div>

然后通过 html jQuery 方法将这些添加到我页面上的块中：

$(sidebarBlock).html(this.filters);

查看 DOM 我实际上看不到脚本，但是当使用 console.log() 进行审查时，它们在那里作为响应。同样，下面显示了脚本：

$(sidebar).find("script").each(function() {
  console.log("found a script");
}

我试过像下面这样使用 .trigger('contentUpdated');：

document.getElementById("layered-filter-block").innerHTML = this.filters;
$(sidebarBlock).trigger('contentUpdated');

和：

$(sidebarBlock).html(this.filters);
$(sidebarBlock).trigger('contentUpdated');

并通过重新应用绑定进行敲除：

ko.cleanNode($('#layered-filter-block'));
ko.applyBindings($('#layered-filter-block'));

上面抛出了一个关于已经应用绑定的错误，但是我之前使用过 cleanNode 来解除绑定，但是错误仍然存在。

Answer 1

我解决的这个问题：

$(sidebarBlock).applyBindings();

https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/

通过 Jquery Ajax 函数加载后不呈现 KnockoutJS 元素

KnockoutJS elements not rendered once loaded via Jquery Ajax function

ajax

requirejs

knockout.js

magento2