2013-08-21 98 views
0

我有一個填充了默認數據和模板的骨幹模型,我認爲應該在頁面加載中顯示該數據,但我無法顯示它。我對Backbone很感興趣,所以任何指針和解釋都將非常感謝。下面的代碼:Backbone.js - 在頁面加載時顯示默認模型數據

(function($) { 
window.Result = Backbone.Model.extend ({ 
    defaults: { 
    name: 'player name', 
    position: '1', 
    stroke: '12', 
    nationality: 'ENG', 
    r1: '11', 
    r2: '22', 
    r3: '33', 
    r4: '44', 
    par: '-9', 
    holeAgg: '399', 
    winnings: '400,000' 
    } 
}); 

window.ResultsView = Backbone.View.extend({ 
    initialize: function() { 
     tagName: 'td', 
     this.template = _.template($('#results').html(), {}); 
    }, 

    render: function() { 
     var renderedContent = this.template(this.model.toJSON()); 
     $(this.el).html(renderedContent); 
     return this; 
    } 
}); 

window.Results = Backbone.Collection.extend({ 

}); 

})(jQuery); 

和HTML

<head> 
    <title>Backbone</title> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script> 
    <script src="./assets/js/vendor/underscore.js"></script> 
    <script src="./assets/js/vendor/backbone.js"></script> 

    <script src="./assets/js/application.js"></script> 

    <link href="./assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="./assets/css/custom.css" rel="stylesheet"> 

    </head> 
    <body> 
    <div id="main"> 

     <script type="text/template" id="results"> 
     <table class="results table"> 
      <th>Pos</th> 
      <th>Player</th> 
      <th>R1</th> 
      <th>R2</th> 
      <th>R3</th> 
      <th>R4</th> 
      <th>Score</th> 
      <th>ToPar</th> 
      <th>Earnings(US$)</th> 
      <tr> 
      <td class="pos"><%= position %></td> 
      <td class="name"><%= name %></td> 
      <td class="score_R1"><%= r1 %></td> 
      <td class="score_R2"><%= r2 %></td> 
      <td class="score_R3"><%= r3 %></td> 
      <td class="score_R4"><%= r4 %></td> 
      <td class="score"><%= holeAgg %></td> 
      <td class="vspar"><%= par %></td> 
      <td class="winnings"><%= winnings %></td> 
      </tr> 
     </table> 
    </script> 

    </div> 


    </body> 
    </html> 
+0

確定的頁面在你運行這個函數的時候已經完成加載了? – blueberryfields

+0

不確定blueberryfields,你能否進一步解釋? – mattc

回答

1

你初始化你的看法?有是沒有代碼..我想你的觀點應該是這樣的

window.ResultsView = Backbone.View.extend({ 
    // with no tagName: 'td' 
    template: _.template($('#results').html(), {}); 

    initialize: function() { 
    }, 

    render: function() { 
     var renderedContent = this.template(this.model.toJSON()); 
     $(this.el).html(renderedContent); 
     return this; 
    } 
}); 

,然後初始化它

model = new Result(); 
var view = new ResultsView({model: model}); 
view.render(); 

你總是可以在這裏找到任何幫助http://addyosmani.github.io/backbone-fundamentals/

+0

你不希望'template = _.template($('#results')。html(),{});'在這種情況下。你需要'template:_.template($('#results')。html())'; '='會是一個JavaScript語法錯誤,並且將數據提供給'_.template'會產生一塊HTML而不是您正在尋找的已編譯模板函數。 –

+0

謝謝你們,我不敢讓這些工作中的任何一個工作。將繼續嘗試 – mattc

相關問題