Question

我目前正在学习handlebar.js，我也是一个非常初学者。我已经尝试过简单的车把练习但是我没有按照需要获得输出任何人都可以帮助我在我的代码中有什么错误。我正在分享我的HTML和javascrpit代码，我已经下载了handlebar.js 3.0版本来做这个练习。

html page

<!DOCTYPE HTML>   
<html>
    <head>
        <title>Handlebars.js Example Template</title>
        <script type="text/javascript" src="js/handlebars.js"></script>
    </head>
    <body>

        <div id="menu-placeholder"></div>
        <h1>Test</h1>
        <script id="menu-template" type="text/x-handlebars-template">


            <ul>
            <li><a href="{{linkURL1}}">{{linkName1}}</a></li>
            <li><a href="{{linkURL2}}">{{linkName2}}</a></li>
            <li><a href="{{linkURL3}}">{{linkName3}}</a></li>
            <li><a href="{{linkURL4}}">{{linkName4}}</a></li>
            <li><a href="{{linkURL5}}">{{linkName5}}</a></li>
            </ul>
        </script>
        <script type="text/javascript" src="js/script.js" /></script>

    </body>
</html>

我的javascript文件

var menuData = {
    linkName1 : "Link 1",
    linkName2 : "Link 2",
    linkName3 : "Link 3",
    linkName4 : "Link 4",
    linkName5 : "Link 5",
    linkURL1 : "http://google.com",
    linkURL2 : "http://jaskokoyn.com",
    linkURL3 : "http://yahoo.com",
    linkURL4 : "http://youtube.com",
    linkURL5 : "http://twitter.com"
};


// Grab the HTML source that needs to be compiled
var menuSource = document.getElementById( 'menu-template' ).innerHTML;
// Compiles the source
var menuTemplate = Handlebars.compile( menuSource );



// Process Template with Data
document.getElementById( 'menu-placeholder' ).innerHTML = menuTemplate( menuData );

Handlebar.js的基本思路

0 个答案: