parser,故名意思,就是解析器的意思,別看他只有那么幾行代碼,jQuery Easyui 能夠根據class就能正常渲染頁面全靠它了。一般情況下,我們並用不到解析器,本文主要討論一下,什么情況下會用到它,如何使用。
自動調用parser:
我們之所以在頁面中,只要書寫相應的class,Easyui就能成功渲染頁面,這是因為解析器在默認情況下,會在文檔裝載完成的時候($(document).ready)被調用一次,而且是渲染整個頁面。
手動調用parser:
有些童鞋反映,當頁面裝載完后,如果用javascript生成的DOM中包含了Easyui支持控件的class,比如說,用javascript生成了以下代碼:
<div class="easyui-accordion" id="tt"> <div title="title1">1</div> <div title="title2">2</div> </div>
雖然頁面上有這樣的DOM了,但是沒有被渲染為Easyui的accordion插件,原因很簡單,Easyui並不會一直監聽頁面,所以不會主動渲染,這時候就需要手工調用Easyui的parser進行解析了。不過手工調用需要注意以下幾點:
(1) 解析目標為指定DOM的所有子孫元素,不包含這個DOM自身:
比如上面代碼生成的HTML,id="tt"是我們想要的手風琴DIV,像下面代碼去手工解析的話是得不到你想要的結果的:
$.parser.parse($('#tt'));
道理很簡單,parser只渲染tt的子孫元素,並不包括tt自身,而它的子孫元素並不包含任何Easyui支持的控件class,所以這個地方就得不到你想要的手風琴效果了,應該這樣寫:
$.parser.parse($('#tt').parent());
渲染tt的父節點的所有子孫元素就可以了,個人覺得通過jQuery的parent()方法是最安全不過的了,不管你的javascript輸出了什么DOM,直接渲染其父節點就可以保證頁面能被正確解析。
(2) 某些組件無法多次解析同一個DOM元素:
如果頁面上本身就有tt元素:
<div class="easyui-accordion" id="tt"> </div>
頁面裝載完,你通過腳本向tt元素append兩個子DIV,然后解析:
$('#tt').append('<div title="title1">1</div><div title="title2">2</div>') $.parser.parse($('#tt').parent());
不要以為你會得到一個滿意的accordion,你什么也得不到,因為頁面初始化的時候parser就主動渲染過tt元素,這時候tt已經被parser重構,你再到腳本中append,得到的DOM結構,其實並不是你預想的結果了,所以要避免這種用法。