javascript - 如何使用 Handlebars 渲染 html

Question

我从 GitHub 下载了 Handlebars

源文件夹中包含handlebars.js和plugin.js。文档中介绍了使用render函数从文件中获取模板的方法如下:

$.handlebars({
templatePath: 'path/to/templates',
templateExtension: 'hbs'
});

// now this will fetch <path/to/templates/content.hbs>
$('#some-element').render('content', {
// ...
});

我使用它所做的事情是:

<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>
$.handlebars({
    templatePath: 'lib/assets',
    templateExtension: 'html'
});
var data = {"username":uname};
$('.container').render('lockscreen', data);

lib/assets/lockscreen.html 包含如下代码:

<div class="center">
                <div class="headline text-center" id="time"></div>
                <div class="lockscreen-name" style="font-weight:600;font-size:16px;"><b>{{username}}</b></div>
                <div class="lockscreen-item">
                    <div class="lockscreen-image"><img src="images/avatar5.png" alt="user image"/></div>
                    <div class="lockscreen-credentials">
                        <div class="input-group">
                            <input type="password" class="form-control" placeholder="password" id="pa_asd"/>
                            <div class="input-group-btn">
                                <button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lockscreen-link"><a href="login.html">Or sign in as a different user</a></div>
            </div>

我仍然无法完成它。我尝试使用其他方式...使用 koorchik 创建的静态函数

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/lib/assets';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            async: false,
            dataType: 'html',
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}
var rendered_html = render('lockscreen', data);

但出现了某种错误，例如

_ is undefined

谁能帮我吗？？？？

Answer 1

这是因为您的代码使用 underscore.js，它是一个外部实用程序库，而 _.template() 实际上是该库中的一个函数。您的代码找不到它，因为您尚未包含 underscore.js 脚本。

这里是 underscore.js 最新缩小版本的链接: http://underscorejs.org/underscore-min.js

您应该在加载资源之前包含它，如下所示:

<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/handlebars.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>