Backbone.js Uncaught TypeError

Question

Я написал программу сыпучие Backbone.js:

<script> 

     var PostModel = Backbone.Model.extend(); 
     var PostView = Backbone.View.extend({ 
      template: _.template($('#posttemplate').html()), 
      intialize: function() { 
       console.log("intializing view"); 
      }, 
      render: function() { 
       console.log("rendering.."); 
       var htmloutput = this.template(this.model.toJSON()); 
       $('#postcontainer').html(htmloutput); 
       return this; 
      } 
     });   

     $(document).ready(function() { 
      var postmodel = new PostModel({title: "hello"}); 
      var postview = new PostView({model: postmodel}); 
      postview.render(); 
     }); 


    </script type="text/javascript"> 



<script type="text/template" id="posttemplate"> 
     <div> Title: <%= title %> , post: <%= post %> </div> 
</script> 

<div class="container" id="postcontainer"></div> 

когда я запускаю код я получаю следующее сообщение об ошибке:

Uncaught TypeError: Не удается прочитать свойство «заменить» из undefined

но он отлично работает, когда я положил template = _.template ($ ('# posttemplate'). html()); в функцию рендеринга.

Answer 1

Ваша проблема в том, что вы пытаетесь получить доступ к шаблону до его существования. HTML документ обрабатывается сверху вниз и, когда у вас есть

template: _.template($('#posttemplate').html())

, то селектор $('#posttemplate') не возвращает никаких результатов, потому что элемент, содержащий шаблон не был разобран еще.

Try переместив элемент

<script type="text/template" id="posttemplate"> 
     <div> Title: <%= title %> , post: <%= post %> </div> 
</script> 

вверх над вашим первым элементом сценария.

Причина, по которой она работает, когда вы положили ее в функцию render, заключается в том, что render вызывается после того, как документ запускает готовое событие, после чего шаблон существует.