使用doT.js的外部模板?

时间:2014-03-13 15:06:31

标签: javascript templates dot.js

我使用doT.js来管理视图模板等等,我想加载外部模板(将其放在另一个文件夹中,然后像CSS文件或JS文件一样加载)有可能用doT.js做到这一点吗? 如果没有,那么模板引擎会让我能够做到这一点?我不喜欢使用jQuery,只是本机JS。

2 个答案:

答案 0 :(得分:2)

我知道您没有要求查询,但对于其他人来说,这是一种将模板作为字符串返回的简单方法,您可以立即将其传递给doT。请注意,这是同步的。这可能不是你想要的,但很容易改变:

function getTemplate(templateUrl) {
    return $.ajax({
        type: "GET",
        url: templateUrl,
        async: false
    }).responseText;
}

答案 1 :(得分:1)

加载这些模板视图的最佳方法是通过XHR调用获取它们,然后将它们附加到文档中:

function appendDotTemplate(idName) {
if (window.XMLHttpRequest) {
    var myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var myRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    console.log("XMLHttpRequest not supported!");
    return;
}

myRequest.onreadystatechange = function () {
    // XMLHttpRequest.onreadystatechange() is personnalized in orded to meet our specific needs.
    if (myRequest.readyState != 4)
        return;
    if (myRequest.status != 200) {
        console.log('Failed to retrive the template! Error : '+myRequest.status);
        // If the request failed, subscribers will be notified with the 'fail' argument.
        return;
    }
    console.log("Debug: Request status = " + _request.status + " .");
    if (myRequest.readyState == 4)
        if (myRequest.status == 200) {
            // It the request succeed :
            // append the new retrived template to the document
            myTemplate = myRequest.responseText;
            var obj = document.createElement("script");
            obj.id = idName; // set an ID to the template in order to manipulate it
            obj.language = "javascript";
            obj.type = 'text/x-dot-template';
            obj.defer = true;
            obj.text = content;
            document.body.appendChild(obj);
            console.log('myTemplate was loaded and append to the document.');
        }
}

希望它会帮助别人:)。