Backbone View не отображает мой шаблон - PullRequest
Новая
       18

Backbone View не отображает мой шаблон

1 голос
/ 17 декабря 2011

Я видел эту небольшую статью о простых представлениях в Backbone.Но моя попытка загрузить шаблон таким способом самостоятельно ... не работает: (

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

<!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 Ответ

1 голос
/ 17 декабря 2011

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

<!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 ().

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

...