<p><code></p> <p>magento2有两种主要JS插件封装形式,<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> UI Widget和Knockout。而大多数情况下,外部引入的javascript plugin都应该实现这两种封装,才能在magento2中完整地利用,主要是因为knockout template不能使用widget,即那些.html文件。checkout page用的是knockout,所以如果要在该页面加入jquery plugin,knockout方式必须实现。</p> <p>假设你已经了解这些:<a href="https://segmentfault.com/a/1190000004948786">https://segmentfault.com/a/11...</a></p> <p>不解释requirejs-config.js部分,假定已引入chosen并命名为“jquery.chosen”,以下是<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> UI Widget的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="define([ 'jquery', 'jquery/ui', 'jquery.chosen' ], function ($){ $.widget('mage.jqchosen', { options: { disable_search_threshold: 999, width: '100%' }, _init: function () { var _self = this; if(this.tagName == 'SELECT') { $(this.element).chosen(this.options); } $(this.element).find('select').each(function() { var _hidden = $(this).is(':hidden'); $(this).chosen(_self.options); if(_hidden) { var _id = $(this).attr('id')+&quot;_chosen&quot;; $(&quot;#&quot;+_id).hide(); } }); } }); return $.mage.jqchosen; });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">define([ <span class="hljs-string">'jquery'</span>, <span class="hljs-string">'jquery/ui'</span>, <span class="hljs-string">'jquery.chosen'</span> ], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">$</span>)</span>{ $.widget(<span class="hljs-string">'mage.jqchosen'</span>, { <span class="hljs-attr">options</span>: { <span class="hljs-attr">disable_search_threshold</span>: <span class="hljs-number">999</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'100%'</span> }, <span class="hljs-attr">_init</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> _self = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>; <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.tagName == <span class="hljs-string">'SELECT'</span>) { $(<span class="hljs-keyword">this</span>.element).chosen(<span class="hljs-keyword">this</span>.options); } $(<span class="hljs-keyword">this</span>.element).find(<span class="hljs-string">'select'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> _hidden = $(<span class="hljs-keyword">this</span>).is(<span class="hljs-string">':hidden'</span>); $(<span class="hljs-keyword">this</span>).chosen(_self.options); <span class="hljs-keyword">if</span>(_hidden) { <span class="hljs-keyword">var</span> _id = $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'id'</span>)+<span class="hljs-string">"_chosen"</span>; $(<span class="hljs-string">"#"</span>+_id).hide(); } }); } }); <span class="hljs-keyword">return</span> $.mage.jqchosen; });</code></pre> <p>将可以用以下代码使用chosen</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div data-mage-init='{&quot;jqchosen&quot;:{}}'> <select><option>...</option></select> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">data-mage-init</span>=<span class="hljs-string">'{"jqchosen":{}}'</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>以下是knockout形式的插件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="define(['jquery','ko','jquery.chosen'], function($, ko) { ko.bindingHandlers.chosen = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { if(element.tagName == 'SELECT') { $(element).chosen({ disable_search_threshold: 999, width:'100%' }); } } }; });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">define([<span class="hljs-string">'jquery'</span>,<span class="hljs-string">'ko'</span>,<span class="hljs-string">'jquery.chosen'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$, ko</span>) </span>{ ko.bindingHandlers.chosen = { <span class="hljs-attr">init</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">element, valueAccessor, allBindings, viewModel, bindingContext</span>) </span>{ <span class="hljs-keyword">if</span>(element.tagName == <span class="hljs-string">'SELECT'</span>) { $(element).chosen({ <span class="hljs-attr">disable_search_threshold</span>: <span class="hljs-number">999</span>, <span class="hljs-attr">width</span>:<span class="hljs-string">'100%'</span> }); } } }; });</code></pre> <p>如果select非手动修改了状态,chosen会因为获取不到event所以不会同步更新,只需要执行<code><a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>('#id').trigger('chosen:updated');</code></p> <p>关于ko如何增加plugin可参考:<a href="http://knockoutjs.com/documentation/custom-bindings.html" rel="nofollow noreferrer" target="_blank">http://knockoutjs.com/documen...</a></p> <p>要把plugin应用到ko组件上,就需要在ko组件的主体加载plugin,由于所有ko组件都来源于Magento_Ui/js/core/app,所以我决定重写这个js,让它加载我的plugin(假设在requirejs-config.js命名为“knockout-chosen”)</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// app/design/frontend/<vendor>/<theme>/Magento_Ui/web/js/core/app.js<br /> define([<br /> './renderer/types',<br /> './renderer/layout',<br /> '../lib/knockout/bootstrap',<br /> 'knockout-chosen' // 新增的plugin<br /> ], function (types, layout) {<br /> 'use strict';</p> <p> types.set(data.types);<br /> layout(data.components, undefined, true, merge);<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// app/design/frontend/&lt;vendor&gt;/&lt;theme&gt;/Magento_Ui/web/js/core/app.js</span> define([ <span class="hljs-string">'./renderer/types'</span>, <span class="hljs-string">'./renderer/layout'</span>, <span class="hljs-string">'../lib/knockout/bootstrap'</span>, <span class="hljs-string">'knockout-chosen'</span> <span class="hljs-comment">// 新增的plugin</span> ], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">types, layout</span>) </span>{ <span class="hljs-meta"> 'use strict'</span>; types.set(data.types); layout(data.components, <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>, merge); });</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div data-bind=&quot;scope: 'koexample'&quot;> <select data-bind=&quot;{chosen:true}&quot;><option>...</option></select> </div> <p><script type=&quot;text/x-magento-init&quot;> { &quot;*&quot;: { &quot;Magento_Ui/js/core/app&quot;: { &quot;components&quot;: { &quot;koexample&quot;: { &quot;component&quot;: &quot;Vendor_Module/js/ko_example&quot; } } } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">data-bind</span>=<span class="hljs-string">"scope: 'koexample'"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">data-bind</span>=<span class="hljs-string">"{chosen:true}"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/x-magento-init"</span>&gt;</span><span class="actionscript"> { <span class="hljs-string">"*"</span>: { <span class="hljs-string">"Magento_Ui/js/core/app"</span>: { <span class="hljs-string">"components"</span>: { <span class="hljs-string">"koexample"</span>: { <span class="hljs-string">"component"</span>: <span class="hljs-string">"Vendor_Module/js/ko_example"</span> } } } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/jquery/jquery_40529.html