由jQuery和骨幹EL

得到div元素我有一個這樣的骨幹觀點：由jQuery和骨幹EL

(function($) { 
    'use strict'; 
    $P.viewTypes.HeaderNavigation = Backbone.View.extend({ 
     tagName: 'div', 
     className: 'header-navigation', 
     id: 'headerNav', 

     templateHeader: _.template(
      '<div id="headerNavLeft" class="js-header-left"></div>' + 
      '<div id="headerNavRight" class="js-header-right"></div>' 
     ), 

     getDivElement: function() { 
      var divEle = this.getDivEl('headerNav'); 
      alert(divEle.innerHTML); 
      var backboneEl = this.el; 
      alert(backboneEl.innerHTML); 
     }, 

     getDivEl: function(id) { 
      var divEle = $('<div>').attr('id', id); 
      return divEle[0]; 
     }, 

     render: function() { 
      this.$el.html(this.templateHeader()); 
      this.getDivElement(); 
      return this; 
     } 

    }); 

})(jQuery);

我的問題是，爲什麼在getDivElement的divEle和backboneEl有什麼不同？ divEle.innerHTML爲空字符串 backboneEl.innerHTML爲

在這種情況下，如何使divEle成爲backboneEl？感謝您的幫助。

來源

2016-04-29 Bibo Morton

我想你誤解了Backbone元素屬性（tagName，...）和$('<div>')是如何工作的。

從fine manual：

ELview.el
[...]
this.el可以從DOM選擇字符串或元件來解決;否則它將從視圖的tagName,className,id和attributes屬性中創建。

所以tagName，className，和id僅用於通過骨幹創建節點和鉤它作爲視圖的el;沒有任何東西將el附加到任何地方的頁面，或者使其對任何事物都是全局可見的，您必須自己做。

從其他fine manual：

jQuery的（HTML，[ownerDocument]）
描述：創建從原始HTML的提供的字符串飛DOM元素。

所以$('<div>').attr('id', id)還創建了一個<div>（與指定id屬性），但再此節點沒有連接到頁面上的任何東西，是不可見的。 $('<div>')不會去任何地方尋找節點，它會創建一個新節點。

當您實例化您的視圖時，它將創建一個<div id="headerNav" class="header-navigation">作爲視圖的el。然後，當你撥打getElDiv時，該功能會創建另一個<div id="headerNav">，它不附加任何內容或填充任何內容。如果再次調用getElDiv，它會創建另一個未連接的節點。

根本不需要您的getDivEl函數，如果您想查看視圖的元素，只需查看el屬性即可。

來源

2016-04-29 19:47:02

由jQuery和骨幹EL

回答

相關問題