如何使用車把渲染HTML

Question

我從GitHub下載了車把

並在源文件夾中包含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>