如何使用车把渲染HTML

Question

I downloaded handlebars from GitHub

and it contained handlebars.js and plugin.js in the source folder.As for told in the documentation the way to use the render function to fetch template from a file is as follow:

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

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

and what i did did to use it is:

<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 contains code like this:

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

And I still can't get it done.I tried it using otherway...using a static function created by 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);

but got some sort of error like

_ is undefined

Can anybody help me????

Answer 1

That's because your code uses underscore.js , which is an external utility library, and _.template() is actually a function from that library. Your code doesn't find it because you haven't included the underscore.js script.

Here is a link to the latest minified version of underscore.js : http://underscorejs.org/underscore-min.js

You should include it before loading your resources, like this:

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