主干视图不呈现我的模板答案

【问题标题】：Backbone View doesnt render my Template主干视图不呈现我的模板
【发布时间】：2012-01-22 13:38:16
【问题描述】：

我看到thisBackbone 中关于简单视图的小文章。但是我尝试自己以这种方式加载模板..不起作用:(

我将代码复制并粘贴到我的文件中，但什么也没发生。这是我的代码：

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

包含的所有脚本都是最新版本.. 我的失败是什么？

感谢所有愿意帮助我的人:)

亚安

【问题讨论】：

标签： javascript backbone.js jquery-templates

【解决方案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() 方法。

我更改的代码还有其他一些小调整，您可以查看。

【讨论】：