我正在加载一个 HTML 模板文件,其中包含我在整个应用程序中使用的模板。该文件如下所示:
<!DOCTYPE html><html><head><title>static_listview_templates</title></head><body>
<ul id="tmp_listview_basic" class="ui-listview"></ul>
<ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li>
...
</body></html>
模板通过requireJS
它把 HTML 代码作为文本字符串返回给我。
我已使用将字符串转换为 jQuery 对象,var el = $( string )
但我仍然无法访问任何元素(我假设是因为它们尚未在 DOM 中)。
问题:
在 jQuery/javascript 中有没有办法
el.find('#tmp_listview_divider') // which gives me an empty object []
从我的模板对象中选择一个元素?如果是这样,我如何访问和拉出 sub_templates 之一?如果不是,我将如何选择“按 ID”的字符串?我可以添加一个开始和结束标识符,但我不知道如何正则表达式"from start-to-end"
谢谢!
编辑:
我的 HTML 模板:
<!DOCTYPE html><html><head><title>static_listview_templates</title></head><body><form id="tmp_listview_filter" class="ui-listview-filter ui-bar-[theme] ui-listview-filter-inset" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-[theme]"><input placeholder="" data-type="search" class="ui-input-text ui-body-[theme]"><a title="" class="ui-input-clear ui-btn ui-btn-up-x ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="[theme]" data-mini="false">><span class="ui-btn-text"></span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a></div></form><ul id="tmp_listview_basic" class="ui-listview"></ul><ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul><li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li><li id="tmp_listview_item" data-filtertext="[filtertext]" data-theme="c" class="ui-li ui-btn ui-btn-icon-right ui-li-has-arrow ui-first-child ui-last-child ui-btn-up-[theme]"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="[link]" class="ui-link-inherit">[link_content]</a></div><span class="ui-icon ui-icon-[link-icon] ui-icon-shadow"> </span></div></li></body></html>
在我的应用程序控制器中,我正在这样做:
... on pagebeforeshow ...
// pull template and language
require(['text!../tx/static_listview.html','i18n!nls/locale_search'],
function ( tmp_listview, lib_search ) {
// element config JSON
var dyn = $.parseJSON( page.find(':jqmData(template="true")').jqmData("config") );
console.log( dyn );
// template
console.log( tmp_listview )
var tmp = $( tmp_listview ),
el = tmp.find('#tmp_listview_divider');
// always []
console.log( el )
};