爲什麼我的簡單骨幹視圖點擊事件不會觸發？

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();將永遠不會被執行。