通过 Jquery Ajax 函数加载后不渲染 KnockoutJS 元素
Posted
技术标签:
【中文标题】通过 Jquery Ajax 函数加载后不渲染 KnockoutJS 元素【英文标题】:KnockoutJS elements not rendered once loaded via Jquery Ajax function 【发布时间】:2019-03-13 07:45:16 【问题描述】:我已经通过 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&cat=143&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&cat=182&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&cat=257&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&cat=342&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&cat=521&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 来取消绑定但是错误仍然存在。
【问题讨论】:
“我已经通过 ajax 加载了侧边栏” 怎么样?显示代码,以及侧边栏本身的相关代码。 @Tomalak 我已经添加了 json 响应,但刚刚使用 jQuery ajax 方法来获取此 json 以及 append 和其他类似方法将内容添加到页面但脚本不显示。跨度> 【参考方案1】:这个对我来说已解决的问题:
$(sidebarBlock).applyBindings();
https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/
【讨论】:
以上是关于通过 Jquery Ajax 函数加载后不渲染 KnockoutJS 元素的主要内容,如果未能解决你的问题,请参考以下文章
jQuery.ajax()通过 HTTP 请求加载远程数据实力详解