下划线模板 - 从外部文件加载模板

时间:2013-05-05 15:36:55

标签: javascript templates dom underscore.js

我已经看到了一些关于如何为_underscore模板实用程序等加载渲染模板的冗长答案。我下面的内容有效:

$.ajax({
    url: 'template.tmp',
    type: 'get',
    success: function(data) {
        $('html').append(data);
    }
});

代码位于加载jquery之后但在使用模板的任何脚本之前。这样可以,还是有理由加载这样的模板不是一个好主意? templates.tmp文件中包含模板

<script type="text/template" id="tmpId"></script>

标记。它们似乎很快就被加载到DOM中。我准备为这个实现受到批评,但我想知道为什么。我唯一能想到的可能是一些处理如果“错误:”被调用而不是“成功:”。 THX。

1 个答案:

答案 0 :(得分:2)

我决定制作自己的基于OO的解决方案。这是构造函数:

var TemplateLoader = function(templatePath) {
    this.template = templatePath;
    this.loaded = false;
    this.error = false;
}

这些是方法:

TemplateLoader.prototype.setReady = function (state) {
    this.loaded = state;
}
TemplateLoader.prototype.setError = function (state) {
    this.error = state;
}
TemplateLoader.prototype.isReady = function () {
    return this.loaded;
}
TemplateLoader.prototype.isError = function () {
    return this.error;
}
TemplateLoader.prototype.loadTemplate = function() {
        templateLoader = this;
        $.ajax({
            url: this.template,
            type: 'get',
            success: function(data) {
                $('html').append(data);
                templateLoader.setReady(true);
            },
            error: function() {
                templateLoader.setError(true);
            }
        });
}

这是如何使用它:

templateLoader = new TemplateLoader('template.tmpl');
templateLoader.loadTemplate();

并检查模板是否已加载:

templateLoader.isReady() //true for loaded
templateLoader.isError() //true for error loading template, eg. template doesn't exist

同样,我很感激任何人都可以通过此代码看到的问题的反馈。如何检查附加到HTML的DOM对象。值得?