Backbone.jsからのDOMへのアクセス表示クラス

私はBackbone.jsを学んでいて、この簡単な例で立ち往生しています。このコードの何が間違っているのか説明してください。アラートボックスが空になってしまいますか？Backbone.jsからのDOMへのアクセス表示クラス

<html> 
    <head> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="test_div">test</div> 
    <script> 
     $(function() { 
      TestView = Backbone.View.extend({ 
       tagName: "div", 
       initialize: function() { 
        alert(this.$("#test_div").text()); 
       } 
      }); 
      window.App = new TestView; 
     }); 
    </script>  
    </body> 
</html>

出典

2012-01-04 grigy

あなたは何を期待していますか？あなたのdivにはテキストがありませんので、空に警告します。そこにテキストを表示したい場合は、最初にthis.elにいくつか追加する必要があります。

編集：this.$はthis.elにスコープされています。アクセスしようとしています。あなたは

TestView = Backbone.View.extend({ 
    el: "body", 
    ...

状体であることをthis.elを指定しない限りその後this.$は動作します。しかし、あなたは単に$("#test_div").text()

出典

2012-01-04 16:22:00 tbranyen

私はdivの内容を取得することを期待しています - "テスト"。私も '$（this.el）.text（）'と '$（this.el）.html（）'を試しました。 – grigy

OK。 'el：" body "'は仕事をしました。ありがとう – grigy

私は「this.elはビューのtagName、className、およびidプロパティ（指定されている場合）から作成されます。だから私はtagNameを指定するとelが自動的に初期化されると思った。 – grigy

この問題を解決するために、あなたのビューを初期化するときに問題が、あなたのあなたのビューがDOMにバインドされていなかったことを、あなたが要素を指定することができている...

<html> 
    <head> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="test_div">test</div> 
    <script> 
     $(function() { 
      TestView = Backbone.View.extend({ 
       tagName: "div", 
       initialize: function() { 
        alert(this.$("#test_div").text()); 
       } 
      }); 
      window.App = new TestView({el: 'body'}); 
     }); 
    </script>  
    </body> 
</html>

を thisを省略して使用することができます

それを行うための別の方法は、ビューを使用すると、そのコンテナ内でそれらを使用する場合、常にこのことから仕事、jqueryの中でグローバルなセレクタを使用して行っていない最高の仕事私のためのビュー自体

TestView = Backbone.View.extend({ 
    el: '#test_div', 
    tagName: "div", 
    initialize: function() { 
     alert($(this.el).find('#test_div').text()); 
    } 
});

にエルを指定しています.elはそのビューですエルフ。 divの外にあるものを変更する必要がある場合は、raising events and catching events.をご覧ください。もちろん、好きなように自由に作業することができます。 jsfiddle上http://documentcloud.github.com/backbone/#View-el

例：ビューのel属性に

詳細。http://jsfiddle.net/saelfaer/Lp2N2/1/

出典

2012-01-04 16:22:49 Sander

ありがとうございます。 tagName、className、idが指定されていれば、それに基づいてelが構築されると考えました。 – grigy

ああ、私はそうしたようにElを指定するか、またはtagnameを使用する2つの方法がありますが、まずdomでビューをレンダリングする必要があります。$（ '＃...'）text （）...あなたの呼び出しがdomのレンダリングされず、divのテキストにアクセスできないビューのelにスコープされていたためです。 – Sander

ありがとうございます。この場合、ビューをレンダリングするとどういう意味ですか？私はコンストラクタを呼び出すとそうすると思います。 – grigy

このビュー機能で作業スコープされ$をthis.el.しますビュークラスが定義されているBACKBONE.JSにこのコードを参照してください、これは$インスタンスであるあなたが実際に使用している：

// jQuery delegate for element lookup, scoped to DOM elements within the 
// current view. This should be prefered to global lookups where possible. 
$ : function(selector) { 
    return (selector == null) ? $(this.el) : $(selector, this.el); 
},

だから、これを使用すると、ビューの中にいるとき、あなたはそれを知っているように$ $ではありません。関数。これは、手動で次のようにスコープ$と同じです。

var test = $("div", this.el)

ビューからグローバル$にアクセスするには、$を使用します。しかし、スコープされた$は理由のためにそこにあります。関心事の分離。あなたのビューコードは、その中の要素だけで動作する必要があります。ビューの外側にある$要素にアクセスすると、スパゲッティコードが再導入されます。バックボーンが避けようとするもの

また、elを初期化できるさまざまな方法について誤解しているかもしれません。ビュー定義でtagNameプロパティを使用すると（ビューコンストラクタにelを渡さなくても）、ビューのdivコンテナを作成するようにバックボーンに指示します。これはデフォルトのtagNameであるため、必要ありません。

ビューを特定の既存の要素にするには、ビュー定義でセレクタをelとして使用します。

TestView = Backbone.View.extend({ 
    el: "#test_div",

出典

2012-01-05 23:19:57

ありがとう、これは役に立ちました – grigy

Backbone.jsからのDOMへのアクセス表示クラス

答えて

関連する問題