Question

下载了把手

它包含源文件夹中的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);

但是遇到了某种错误，比如

_未定义

任何人都可以帮助我????

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>

如何使用把手渲染html

1 个答案: