Question

我在Backbone中看到this关于简单视图的小文章。但是我尝试以自己的方式加载模板..不起作用：（

我将代码复制并粘贴到我的文件中但根本没有发生任何事情。这是我的代码：

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

Answer 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（）方法。

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

骨干视图不会渲染我的模板

1 个答案: