2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
#template {
    display: none;
}
</style>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
    src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>

    <div id="template">
        <div id="event">
            <button><%= title %></button>
        </div>
    </div>

    <button id="cmd_create_event" name="cmd_create_event" type="button">Create
        a new `EventModel`</button>

    <div id="div_event_list"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#cmd_create_event").click(function() {
                var template = $("div#template div#event").children().html();
                var compiled = _.template(template);
                $("#div_event_list").html(compiled({
                    title : "New Event Title"
                }));
            });
        });
    </script>

</body>
</html>

html()呼び出しがこれを返さない場合、上記は完全に機能します。&lt;%= title %&gt;

HTMLで記述したとおりに正確 に返すようにしたいので、アンダースコアを使用してテンプレートを作成するために使用できます。<button><%= title %></button>

どのように？

あるいは、もっと良い方法はありますか？追加の依存関係なし（jquery /アンダースコアのみ）。（多すぎる）余分なコードなし。

4

1 に答える 1

4

テンプレートソースをに保存する代わりに<div>、未評価の<script>ブロックに配置します。

<script type='text/template' id='template'>
  <button><%= title %></button>
</script>

その内容をでフェッチすると.html()、見た目どおりの内容が返されます。その「タイプ」の値は（私が）作り上げたものです。実際のJavaScriptタイプ以外は何でも使用でき、ブラウザはそれを完全に無視します。ただし、それはDOMに含まれ、その内容をフェッチできるようになります。コンテンツはHTMLであることが期待されていないため、HTMLメタ文字は考慮されません。

テンプレートマーカー&lt;の「>」への変換は、実際にフィードしたものであるため、ブラウザによって実行されます。エスケープされていないHTMLメタ文字は実際には許可されていませんが、ブラウザはそれを認識し、<%それ%>を解釈します。仕方。

于 2012-07-08T13:23:50.140 に答える