具有下劃線模板示例的骨幹

我是backbonejs和underscorejs的新手。我發現了一些video材料可供觀看，並且在嘗試修改示例時遇到問題。具有下劃線模板示例的骨幹

這裏是我的代碼：

<html> 
<head > 
    <meta charset="UTF-8"> 
    <script type="text/javascript" src="javascript/jQuery.js"></script> 
    <script type="text/javascript" src="javascript/underscore.js"></script> 
    <script type="text/javascript" src="javascript/backbone.js"></script> 

    <script type="text/template" id="list-template"> 
     <li><a href="<%= href %>"><%= text %></a></li> 
    </script> 

    <script type="text/javascript"> 


     model = new Backbone.Model({ 
      data: [ 
       {text: "Google", href: "google.com"}, 
       {text: "Facebook", href: "facebook.com"}, 
       {text: "Yahoo", href: "yahoo.com"} 
      ] 
     }); 


     var View = Backbone.View.extend({ 
      el: "#container", 
      events: { 
       "click button": "render" 
      }, 
      render: function(){ 
       var data = this.model.get('data'); 
       for(var i = 0; i<data.length; i++){ 
        var variables = { href: data[i].href, text: data[i].text }; 
        var li = _.template($("#list-template").html(), variables); 
        this.$el.find('ul').append(li); 
       } 
      } 
     }); 

     var view = new View({ model: model }); 

    </script> 
</head> 

<body> 
    <div id="container"> 
     <button>Load</button> 
     <ul id="list"> 
    </ul> 
    </div> 
</body>

當然行不通的，而且我沒有找到原因。如果您看到請回答或指導如何在自定義事件上綁定模板，而不是初始化。

來源

2013-01-10 eomeroff

您是否收到任何錯誤？ – Lukas

@Lukas完全沒有錯誤（同時監控Firefox控制檯） – eomeroff

問題是JavaScript正在頁面上呈現元素之前執行。將代碼包裹在$(document).ready()中：

$(document).ready(function() { 
    var model = new Backbone.Model({ 
    .... 
    var view = new View({ model: model }); 
});

來源

2013-01-10 19:45:50 Lukas

該視圖有el：「#container」硬編碼，這是否不能確保存在元素？我剛剛嘗試過，仍然不起作用。謝謝。 – eomeroff

我發現了這個錯誤。查看更新後的答案。 – Lukas

非常感謝。在沒有使用underscore.js模板的視頻中，沒有$（document）.ready（function（）也在這個鏈接http://backbonetutorials.com/what-is-a-view/中，但他們沒有使用它。訣竅是什麼？再次感謝 – eomeroff

具有下劃線模板示例的骨幹

回答

相關問題