Question

这个Backbone.js代码示例中的this属性函数如何？

由于代码中未指定use strict指令且没有对象传递给任何函数，Backbone.js代码是默认为全局应用程序对象还是执行其他操作？

我假设this.render()可能会渲染到通过下划线模板传入的el属性指定的DOM元素，但是this.$el.html呢？

<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>
<div id="search_container"> </div>
<script type="text/javascript">
  var SearchView = Backbone.View.extend({ 
      initialize: function({
          this.render(); 
      }, 
      render: function(){ 
          // Compile the template using underscore 
          var template = _.template( $("#search_template").html(), {} ); 
          // Load the compiled HTML into the Backbone "el" 
          this.$el.html( template ); 
      }
  }); 
  var search_view = new SearchView({ el: $("#search_container") }); 
</script>

Answer 1

在此代码示例中，this是指向SearchView的实例视图的指针。

您可以创建该视图的许多实例，并且每个实例都会this指向自己。

每个视图实例都有两个属性，指向该视图实例的DOM元素。 .el指向DOM元素，.$el是指向该DOM元素的jQuery对象。

.$el的好处是您可以在该对象上调用任何jquery methods。

所以this.$el.html()表示您在该视图实例的DOM元素上调用jQuery.html method。

在您的代码中，您已编译该视图的模板并将其传递给$el.html()，this.render()将模板的HTML插入该视图的DOM元素中。

对于initialize中的render，它只是在该实例初始化时调用该实例的new方法，即您看到initialize 1}}关键字。创建了新实例，自动调用this.render()方法，调用this.render()。

例如，您可以在脚本的最后一行之后直接调用initialize，而不是在search_view.render()中调用interleave=all。

这个代码Backbone示例中的“this”功能如何？

1 个答案: