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

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 回答