主干视图不渲染我的模板

Backbone View doesnt render my Template

本文关键字：我的 视图      更新时间：2023-09-26

我看到了一篇关于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

这是您的代码的工作示例。我把它清理了一下。

<!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()方法。

我还对代码做了一些小的调整，您可以查看一下。

相关文章：