20

<template>HTMLソースでタグを使用しようとしているこの状況があります：

<template id="some-id">
  <div id="content-container">
    <span>{{some_string}}</span>
  <div>
</template>

これにより、最終的にテンプレートがドキュメントに配置されますが、DOM にあるとは見なされません。これは、テンプレート タグをサポートするブラウザーで $("#content-container") が見つからないことを意味します。私が検索した場合：

$("#some-id")

私はこれを取り戻します：

<template id=​"some-id">​
  #document-fragment
    <div id="content-container">
      <span>{{some_string}}</span>
    <div>
</template>​

これのどれも私を驚かせません。方法を知る必要があるのは、ドキュメント フラグメントのコンテンツを複製し、必要な場所で DOM に貼り付けることができる新しいノードを作成することです。

jQueryを使わずにこれを行う方法の例を見つけましたが、このようなコードの多くはすでにjQueryを使用しており、jQueryを使用してこれを行う方法を知る必要があります.

私が最初に考えたのは、html を取得し、それを使用して新しいノードを作成することでした。

stuff = $("#some-id").html()
new_node = $(stuff)

これにより、次のエラーが発生します。

Error: Syntax error, unrecognized expression: <the html string>

エラーが口ひげの構文によるものかどうかはわかりません。この動作のどこかにjQueryソリューションが必要だと思いますが、Googleで検索すると、jQueryテンプレートのヒットが大量に表示されますが、これは異なります。

これを解決するのに役立つサイト/ページへの考え、回答、またはポインタを持っている人はいますか? 私はハック的なものを一緒にまとめるのを避けようとしています。

編集:私はこの解決策を見つけました(解決策であることを確認するためにまだテストしていますが、有望に見えます);

template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)

以前は本当に必要ではなかった div を含むことになりますが、それを受け入れることができます。でも、こういうのはダサく感じる。誰もこれに対するより良いアプローチを持っていますか? 利点は、テンプレート タグの動作をまだ完全に適応させていないブラウザーでも機能することです。

ありがとう！

4

2 に答える 2

23

試す：

var myTemplate = $("#some-id").html().trim();
var myTemplateClone = $(myTemplate);
于 2013-11-24T18:58:43.250 に答える