2011-12-17 3 views
1

Я видел this Маленькая статья о простых взглядах в Backbone. . Но моя попытка загрузить шаблон в том, как на моем собственном .. не работает :(Backbone View does not render my Template

Я скопировать и вставить код в свой файл, но ничего не произошло совсем Вот мой код:

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8"> 

    <script type="text/javascript" src="js/vendor/jquery-1.7.1.js"></script> 
    <script src="js/vendor/underscore.js"></script> 
    <script src="js/vendor/backbone.js"></script> 

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

    <script type="text/javascript"> 
    ;(function(){ 
     SearchView = Backbone.View.extend({ 
     initialize: function(){ 
     _.bindAll(this, 'render'); 
     }, 
     render: function(){ 

     var template = _.template($("#search_template").html(), {}); 
     $(this.el).html(this.template); 
     this.el.html(template); 
     } 
    }); 

    var search_view = new SearchView({ el: $("#search_container") }); 
    })(jQuery); 
    </script> 

    <script type="text/template" id="search_template"> 
    <label>Search</label> 
    <input type="text" id="search_input" /> 
    <input type="button" id="search_button" value="Search" /> 
    </script> 



    </body> 
</html> 

Все сценарии включены самые новые версии .. Что это мой провал?

Спасибо всем, кто хочет помочь мне :)

yaaan

ответ

1

Вот рабочий пример вашего кода. Я немного почистил его.

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8"> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> 
    <script type='text/javascript' src='http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js'></script> 
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js'></script> 
    <script type="text/javascript"> 
     $(function(){ 
     SearchView = Backbone.View.extend({ 
      initialize: function(){ 
      _.bindAll(this, 'render'); 
      }, 
      render: function(){ 
      $(this.el).html($("#search_template").html()); 
      } 
     }); 

     var search_view = new SearchView({ el: $("#search_container") }); 
     search_view.render(); 
     }); 
    </script> 

    <script type="text/template" id="search_template"> 
     <label>Search</label> 
     <input type="text" id="search_input" /> 
     <input type="button" id="search_button" value="Search" /> 
    </script> 
    </head> 
    <body> 
    <div id="search_container"></div> 
    </body> 
</html> 

Вызов _.template() бросает ошибку, так как модель не передается к нему, так что я взял этот метод крикнуть.

Как @nikoshr указал, как только объект SearchView был создан, вам необходимо вызвать метод render().

Были также некоторые другие мелкие изменения из кода, который я изменил, и вы можете посмотреть его.