Question

我是Handelbars.js的新手，我想测试一下。我只有一个html文件，其内容我想由handlebars.js呈现：

HTML文件：

<html>
<head>
    <script type="text/javascript">
        console.log("Head:getting css");
    </script>
    <link rel="stylesheet" type="text/css" href="css/main_2.css">
</head>

<body>
    <div class="phone-screen">
        <script type="text/javascript">
            console.log("Body:start MasterPage");
        </script>
        <!--MasterPage -->
        <script id="app-bar" type="text/x-handlebars-template">
            <div class="app-bar-container">
                </div>
                <div class="nav-bar-container">
                    <div class="nav-tab-left nav-tab-selected nav-tab-label-Selected">
                        <div class="tab-lable-centered ">History</div>
                    </div>
                    <div class="nav-tab-right nav-tab-notSelected ">
                        <div class="tab-lable-centered ">New</div>
                    </div>      
                </div>
        </script


        <!-- Content -->
        <script id="workout-list-tpl" type="text/x-handlebars-template">
            <div class="list-container">
                <div class="week-seperator">
                    <div class="week-lable-right ">Week 12</div>
                </div>
                <div class="workout-card-white">
                    <div class="workout-card-label ">Workout</div>
            </div>
        </script>

        <script type="text/javascript">
            console.log("Body:getting Scripts________________________");
        </script>
        <script src="lib/handlebars.js"></script>
        <script src="js/storage/memory-store.js"></script>
        <script src="lib/jquery-1.8.2.min.js"></script>
        <script src="js/MainView.js"></script>
        <!--<script src="js/EmployeeView.js"></script>-->
        <script src="js/main_2.js"></script>
    </div>
</body>

应用javascript：

var app = {
            initialize: function() {
     console.log("initializer start: ");
     var self = this;
     //this.detailsURL = /^#employees\/(\d{1,})/;
     //this.registerEvents();
     this.store = new MemoryStore(function() {
        self.route();
     });
        },

        route: function() {
     console.log("route function start.");
     var self = this;
     var hash = window.location.hash;
     if (!hash) {
        if (this.homePage) {
            //this.slidePage(this.homePage);
        } else {
            console.log("homePage: ");
            this.homePage = new MainView(this.store).render();
            console.log("homePage = " + this.homePage );
            //this.slidePage(this.homePage);
        }
        return;
     }
     var match = hash.match(this.detailsURL);
     if (match) {
        //this.store.findById(Number(match[1]), function(employee) {
            //self.slidePage(new EmployeeView(employee).render());
        //});
     }
        },

        showAlert: function (message, title) {
     if (navigator.notification) {
        navigator.notification.alert(message, null, title, 'OK');
     } else {
        alert(title ? (title + ": " + message) : message);
     }
        },

    };
    console.log("app.initialize();");
    app.initialize();

和view.js：

var MainView = function(store) {

this.render = function() {
    console.log("render function execution:" + MainView.template() );
    this.el.html(MainView.template());
    return this;
};

this.initialize = function() {
    console.log("MainView init start.");
            // Define a div wrapper for the view. The div wrapper is used to attach events.
           this.el = $('<div/>');
           //this.el.on('keyup', '.search-key', this.findByName);
    };

    this.initialize();

}
console.log("Handlebars.compile($(app-bar).html()); " );
MainView.template = Handlebars.compile($("#app-bar").html());

控制台日志：

Head:getting css main_2.html:4
Body:start MasterPage main_2.html:12
Body:getting Scripts________________________ main_2.html:41
Handlebars.compile($(app-bar).html());  MainView.js:19
app.initialize(); main_2.js:46
initializer start:  main_2.js:5
route function start. main_2.js:15
homePage:  main_2.js:22
MainView init start. MainView.js:10
render function execution:
            <div class="app-bar-container">
                </div>
                <div class="nav-bar-container">
                    <div class="nav-tab-left nav-tab-selected                      nav-tab-label-Selected">
                        <div class="tab-lable-centered ">History</div>
                    </div>
                    <div class="nav-tab-right nav-tab-notSelected ">
                        <div class="tab-lable-centered ">New</div>
                    </div>      
                </div>
         MainView.js:4
 homePage = [object Object]

代码进入view.js中的render函数获取html代码，但我不知道接下来会发生什么，以及为什么它不会在浏览器中呈现。

Answer 1

我似乎忘记了将生成的html字符串附加到html页面的最后一步：

$('body').append(page.el);

Handlebars.js：呈现未显示的HTML代码

1 个答案: