为什么我的简单骨干视图点击事件不会触发？

Question

这是我的看法骨干

var TreeNode = Backbone.View.extend({ 
     tagName : "span", 
     className : "ndelem dirnode", 
     events : { 
      "click" : "selectNode", 
     }, 
     initialize : function() { 
      _.bindAll(this, "render", "selectNode"); 
      $(this.el).append(this.model.get("fname")).attr({ 
       "data-cid" : this.model.cid 
      }); 

     }, 
     render : function() { 
      this.delegateEvents(); 
      return this; 
     }, 

     selectNode : function(e) { 
      e.stopPropagation(); 

      this.model.set({ 
       isOpened : true 
      }); 
     } 
    }); 

主要观点

var TreeZone = Backbone.View.extend({ 
     el : $("#nodes"), 
     initialize : function() { 
      this.collection.bind("add", this.list, this); 
     },  
     getHtml : function(elem) { 
      var newItem = $("<div/>").append(elem); 
      return newItem.html(); 
      newItem.remove(); 
     }, 
     getSelectedItem : function() { 
      var selectedItem = $('#nodes').jqxTree('selectedItem'); 
      if (selectedItem != null) 
       return selectedItem.element; 
      else { 
       var treeItems = $('#nodes').jqxTree('getItems'); 
       var firstItem = treeItems[0]; 
       return firstItem.element; 
      } 
     }, 
     list : function(file) { 

      var node = new TreeNode({ 
       model : file 
      }); 
      var newItem = this.getHtml(node.render().el); 

      var element = this.getSelectedItem(); 

      $('#nodes').jqxTree('addTo', { 
       html : newItem, 
      }, element); 
      $('#nodes').jqxTree('expandItem', element); 
     } 
    }); 

var tree = new TreeZone({collection:dircollection}); 

我将元素添加到集合的场景。

但树节点点击事件没有触发。只是我将原始html添加到树节点，因为树不支持jquery对象。所以我想从获取html函数获取html。并把它交给树。

Answer 1

事件绑定到DOM元素，但您最终使用HTML字符串。你这样做：

getHtml : function(elem) { 
    var newItem = $("<div/>").append(elem); 
    return newItem.html(); 
    newItem.remove(); 
}, 

//... 
var newItem = this.getHtml(node.render().el); 

所以getHTML返回一个字符串，并尽快为您转换您TreeNode的el（这是一个DOM对象）到一个字符串，返回重视el事件处理的delegate没了：没有delegate，没有事件。

我可以看到一对夫妇的选择：

1. 挖节点的<span>出#nodes的addTo电话后，用setElement将它重新连接到TreeNode视图。

2. 重新排列结构，以至于根本没有TreeNode。如果您将类添加到节点<span>，那么您可以让TreeZone处理所有事件;例如，如果你的节点使用<span class="node">，然后TreeZone能有这样的：

   events: { 
       'click .node': 'selectNode' 
   } 
   

   而且你有一个selectNode方法上TreeZone而不是TreeNode。您可能需要将data-id属性添加到<span> s，以便您可以从<span>回溯到模型。

另外请注意，您在getHtmlnewItem.remove();将永远不会被执行。