2016-04-29 9 views
0

でのdiv要素を取得:私はそのようなバックボーンビューを持っているjQueryとバックボーンエル

(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として取得するにはどうすればよいですか? ご協力いただきありがとうございます。

答えて

0

バックボーンの要素のプロパティ(tagName、...)と$('<div>')の両方がうまく動作していると誤解していると思います。より

fine manual

ELview.el
[...]
this.el DOMセレクタ文字列または要素から分割することができます。それ以外の場合は、ビューのtagName,className,idおよびattributesプロパティから作成されます。

のでtagNameclassName、およびidは単にノードを作成し、ビューのelとしてそれをフックするバックボーンで使用されています。ページにどこにでもelが付いていたり、何にでも見えるようにするものは何もありません。

fine manualから:

jQueryの(HTML、[のownerDocument])
説明:生HTMLの設けられた列からオンザフライでDOM要素を作成します。

ので$('<div>').attr('id', id)<div>(指定id属性を持つ)を作成しますが、再び、このノードは、ページ上の何に付着していないと表示されません。 $('<div>')はどこにでもノードを探すことなく、新しいノードを作成します。

ビューをインスタンス化すると、ビューのelとして<div id="headerNav" class="header-navigation">が作成されます。その後、getElDivを呼び出すと、その関数は何かに接続されていないか、何も入っていない別の<div id="headerNav">を作成します。 getElDivを再度呼び出すと、まだ別の接続されていないノードが作成されます。

getDivEl機能はまったく必要ありません。ビューの要素を表示する場合は、elプロパティを確認してください。