Question

我对骨干的最大问题是我似乎永远不会理解“el”是如何工作的。我觉得我真的知道它应该如何工作，但似乎总是给我带来麻烦。

为什么这个。$ el未定义在此codepen示例中？

http://codepen.io/anon/pen/gPdyvj?editors=0010

html：

<div class="wrapper">
  <div class="todo-container">
    <h1>To Do List</h1>
    <input type="text" class="new-todo-box">
    <button class="test">test</button>
    <div class="todo-list">

    </div>
  </div>
</div>

javascript

  var TodoView = Backbone.Collection.extend({
    el: '.todo-container',
    events: {
        'click .test': 'handleEnter'
    },
    handleEnter: function(){
        console.log("hello world test. ")
    },

    initialize: function(){
      this.render();
    },

    render: function(){
        console.log("hello")

      //this.$el is undefined
      console.log(this.$el)

      //so this does not work. 
      this.$el.html("testing $el")


    }

  });

$(document).ready(function(){  
  new TodoView();
});

我不明白，因为我正在定义el元素使用类名的内容。我很确定我过去曾经这样使用过它。我觉得我永远不知道el什么时候才能正常工作。事件也没有解雇，我认为这与el没有正确设置有关。

Answer 1

问题在于：

var TodoView = Backbone.Collection.extend({ // });

你试图从一个集合中扩展一个“View”，一个集合没有属性$ el，而不是那个，你必须这样做：

var TodoView = Backbone.View.extend({ // });

为什么不会这样。$ el在我的骨干视图中工作？

1 个答案: