0

アプリケーション全体で使用しているテンプレートを含む 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 の 1 つにアクセスして引き出すにはどうすればよいですか? そうでない場合、「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">&nbsp;</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">&nbsp;</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 )
   };
4

2 に答える 2

1

これはトリックを行います：

var el = $('<div />').html(string).find('#tmp_listview_divider');

また：

var el = $(string).filter('#tmp_listview_divider');

ただし、テンプレートが 1 つの要素または何かにラップされて返される場合、前者はおそらくより安定しています。

.find()一致した要素の子孫を取得するため、これらのいずれかを実行する必要があり$(string)ます。ドキュメントフラグメントを as として返し、タイトル、ul、ul、li などの子孫を検索しますが、[<title>, <ul>, <ul>, <li>...]これは必要なものではありません。最初にできる要素ですべてをラップする必要があります。.find()#tmp_listview_divider.find()

于 2012-12-10T00:46:18.370 に答える
0

el.find()行ったように HTML 文字列を jQuery オブジェクトに入れたら、ドキュメント フラグメントで使用できますが、セレクター'#tmp_listview_divider#'が間違っているように見えます。末尾に があってはなりません#。

関連する HTML を見せていただければ、セレクターを正しく設定するお手伝いをいたします。

編集:質問に追加したHTMLに基づいて、これを使用できるはずです:

el.find('#tmp_listview_divider')
于 2012-12-09T18:19:40.140 に答える