CODEWITHSUNDEEP
javascriptbackbone.jsjquery-templates
yaaaan
yaaaan

Reputation: 53

Backbone View doesnt render my Template

I saw this little article about simple views in Backbone. But my try to load a template in that way on my own.. doesnt work :(

I copied and pasted the code into my file but nothing happened at all. Here is my code:

<!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>

All of the scripts included are the newest versions.. What is my fail?

Thanks to everyone who wants to help me :)

yaaan

Upvotes: 1

Views: 2422

Answers (1)

Paul
Paul

Reputation: 18597

Here's a working example of your code. I cleaned it up a bit.

<!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>

The call to _.template() was throwing an error because a model wasn't being passed to it, so I took that method call out.

Like @nikoshr pointed out, once the SearchView was instantiated, you then need to call the render() method.

There were some other minor tweaks from the code I changed as well, which you can look over.

Upvotes: 1

Related Questions