Question

对于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 （这是我ajaxly加载js模板的hack）

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();
}

这就是我不喜欢的事情。

这不适用于Chrome
看起来很多代码只是加载一些模板
我失去了使用$（document）.ready（）的能力。我现在必须将我在templateReady（）方法中的所有代码都设置为“模板安全”。

有解决方法吗？

谢谢，

志

Answer 1

只需将模板主体加载为简单文本，忘记将其放入虚拟<script>块中。您可以使用$.tmpl(body, params)填充模板并将其转换为字符串以附加到DOM。

“不是真正的脚本”<script>块的全部内容在某些情况下非常有用。

编辑 - 示例：

$.get("/some/url/for/a/template", function(templateBody) {
  var expandedTemplate = $.tmpl(templateBody, { param1: 0, param2: "Hello World" });
});

Answer 2

如果目标是在每次通过ajax获取数据时获取唯一模板，那么您可能会尝试同时获取模板并将其包含在数据中，即如果您可以修改返回的对象（.Net中的匿名对象）。然后，您可以将模板存储在任何您想要的位置，您只需要对数据和模板进行1次ajax调用。

动态加载jQuery模板

2 个答案: