Handelbars.js：未顯示HTML代碼

我是Handelbars.js的新手，我想測試它。我只是有一個HTML文件，我想其內容由handlebars.js呈現：Handelbars.js：未顯示HTML代碼

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讓HTML代碼中的渲染功能，但我不知道接下來會發生什麼，所以爲什麼它在瀏覽器中不會被渲染。

來源

2013-11-15 SnafuBernd

什麼是顯示在控制檯？ – amdixon

添加控制檯登錄後，sry爲... – SnafuBernd

看來我忘了最後一步，追加生成的html字符串的html頁面：

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

來源

2013-11-15 13:26:41 SnafuBernd

這是否意味着它的作品...？編輯問題或關閉，讓人們知道。 –

如果您的問題已解決，請[請將此答案標記爲已接受]（http://meta.stackexchange.com/a/5235/220538）。 –

Handelbars.js：未顯示HTML代碼

回答

相關問題