6

jQuery テンプレートの場合:

http://api.jquery.com/category/plugins/templates/

テンプレートをページ上で事前に定義するのではなく、サーバーから動的にロードできるようにしたいと考えています。

プロジェクトで見たデモでは、事前定義されたテンプレートが使用されています。いくつかの研究の後、私はそれが可能であることを発見しました。

私はこれを試してみましたが、うまくいきません:

<script src="child.html" type="text/x-jquery-tmpl"></script>

私はこれをやってみましたが、うまくいきません：

$(function () {
    $.get("child.html", function (data) {
        //Add template
        $.template("tmplChild", data);
    });

    //template binds before async call is done
    $.tmpl("tmplChild").appendTo("body");
});

そして最後に、次のハックにたどり着きました。

so.html (これはメイン ページです):

<html>
<head>
<title></title>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="text/javascript" src="so.js"></script>

<script type="text/javascript">

    $(function () {
        initTemplates(templateReady);
    });

    function templateReady() {
        $.tmpl("tmplChild").appendTo("body");
    }

</script>
</body>
</html>

child.html (これは子テンプレートです)

<h1>Child Loaded</h1>

so.js (これは、js テンプレートを ajaxly でロードするための私のハックです)

function initTemplates(callback) {
    var templateUrl = "child.html";
    var templateName = "tmplChild";

    initTemplate(templateUrl, templateName, callback);
}

function initTemplate(url, name, callback) {
    var opts =
        {
            type: "GET",
            url: url,
            dataType: ($.browser.msie) ? "text" : "xml",
            success: function (data) {
                xmlCallback(data, name, callback);
            },
            error: function (x) {
                xmlCallback(x.responseText, name, callback);
            }
        }

    $.ajax(opts);
}

function xmlCallback(data, name, callback) {

    if (typeof data != "string") {
        if (window.ActiveXObject) {
            var str = data.xml;
            data = str;
        }
        // code for Mozilla, Firefox, Opera, etc.
        else {
            var str = (new XMLSerializer()).serializeToString(data);
            data = str;
        }
    }

    //only takes strings!
    $.template(name, data);

    callback();
}

そして、ここが私が気に入らないところです。

  1. これは Chrome では機能しません
  2. いくつかのテンプレートをロードするためだけに多くのコードのように見えます
  3. $(document).ready() を使用できなくなりました。すべてのコードをこの templateReady() メソッドに配置して、「テンプレート セーフ」にする必要があります。

これを回避する方法はありますか？

ありがとう、

カイ

4

2 に答える 2

4

テンプレートの本文を単純なテキストとしてロードするだけで、ダミー<script>ブロックに配置する必要はありません。を使用$.tmpl(body, params)してテンプレートにデータを入力し、それを文字列に変換して DOM に追加できます。

「実際にはスクリプトではない」<script>ブロックの全体は、状況によっては便利なだけです。

編集— 例:

$.get("/some/url/for/a/template", function(templateBody) {
  var expandedTemplate = $.tmpl(templateBody, { param1: 0, param2: "Hello World" });
});
于 2010-11-01T20:33:05.043 に答える
2

ajax 経由でデータを取得するたびに一意のテンプレートをフェッチすることが目標である場合は、同時にテンプレートをフェッチしてデータに含めることができます。つまり、返されたオブジェクト (匿名オブジェクト.Net で)。次に、必要な場所にテンプレートを保存でき、データとテンプレートの両方に対して 1 つの ajax 呼び出しのみが必要です。

于 2010-11-01T21:03:44.097 に答える