Zugriff auf DOM Backbone.js Klasse Ansicht

Ich Lerne Backbone.js und hängengeblieben an diesem einfachen Beispiel. Könnten Sie erklären, was falsch mit diesem code, das macht die alert-box Karte leer?

<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>

InformationsquelleAutor grigy | 2012-01-04

2

Was erwartest du? Es gibt keinen text im div, daher ist es warnt leer. Wenn Sie möchten, um zu sehen, text in es Sie haben werde, um etwas zu this.el ersten.

Edit: this.$ bezieht sich auf this.el ich sehe, dass du versuchst, dass der Zugang. Es sei denn, Sie geben this.el sein Körper wie
```
TestView = Backbone.View.extend({
  el: "body",
  ...
```
Dann this.$ arbeiten. Allerdings können Sie einfach weglassen, die this und verwenden $("#test_div").text()
- Ich gehe davon aus, dass man den div-Inhalt - "test". Ich versuchte auch $(this.el).text() und $(this.el).html(), immer noch das gleiche.
- OK. el: "body" hat den job. Dank
- Was verwirrt mich ist, dass die Dokumentation der sagt:".el wird aus der Sicht der tagName, className, und die id-Eigenschaft, wenn angegeben. Wenn nicht, el ist ein leeres div-Element". Daher dachte ich, wenn ich geben Sie den tagName der el wird automatisch initialisiert werden.
- Es wird automatisch initialisiert ein leeres div. tagName einfach können Sie ändern, welche Art von leeren Elements Backbone für Sie generiert. So könnten Sie einen leeren Absatz-tag, wie Ihr el zum Beispiel. Welche Verbindung hat Ihr Blick zu DOM-sofern Sie es nicht ausdrücklich? Wie würden Sie wissen, wo zu suchen? Persönlich würde ich nicht verwenden Körper als Ihre el und stattdessen wickeln Sie es in ein div-container oder ähnliches.
- Ja, das macht Sinn. Aber was ist, wenn ich geben Sie die id-Eigenschaft, sollten Sie nicht, dass es nicht ausdrücklich?
InformationsquelleAutor tbranyen
3

das problem ist, dass Ihr Blick war nicht verpflichtet, dem DOM, können Sie geben Sie ein element bei der Initialisierung Ihrer Sicht dieses Problem zu beheben...
```
<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>
```
einen anderen Weg, es zu tun, ist die Angabe der el in der Ansicht selbst
```
TestView = Backbone.View.extend({
    el: '#test_div',
    tagName: "div",
    initialize: function() {
        alert($(this.el).find('#test_div').text());
    }
});
```
für mich sichten funktionieren am besten, wenn Sie Sie in Ihrem container, die gehen nicht über Globale Selektoren in jquery, arbeiten Sie immer von dieser.el ist der Ansicht selbst. wenn Sie brauchen, um etwas zu verändern, außerhalb der div, werfen Sie einen Blick auf auslösen von Ereignissen und abfangen von Ereignissen., Aber natürlich sind Sie frei, um zu arbeiten, wie Sie möchten.

mehr info auf der el Attribut eines view: http://documentcloud.github.com/backbone/#View-el

Beispiel auf jsfiddle: http://jsfiddle.net/saelfaer/Lp2N2/1/
- Danke. Ich dachte, wenn tagName, className und id angegeben sind, dann ist el konstruiert, basierend auf, dass.
- ah richtig, es gibt zwei Möglichkeiten, entweder geben Sie die El, wie ich Tat, oder verwenden Sie die tagname-aber dann müssen Sie zuerst Rendern der Ansicht in den dom, bevor Sie dies tun können.$('#...').text()... weil Ihr Anruf wurde eingeschränkt auf die el aus Ihrer Sicht, was ja auch nicht gemacht in der dom-und konnte nicht auf deine div-text.
- Danke. Aber was meinst du mit Rendern einer Ansicht in diesem Fall? Ich würde denken, den Aufruf eines Konstruktors bedeutet, dass.
- Nein, durch den Aufruf der Konstruktor Ihre Ansicht angelegt wird, aber keine ist, wo Leistungen im DOM-Baum... Sie haben zum Rendern der Ansicht in der dom-irgendwo, entweder durch die Angabe von 'el' - Attribut sagen, was die Ansicht vertritt, im dom, oder Sie erstellen ein neues element (das ist, was der tagname und die alle sind) aber das neue element sollte dann Hinzugefügt werden, die in das DOM wie $('#mypage').append(myAppView.el); in jedem Fall gibt es viele Möglichkeiten, wie Sie arbeiten können, Rückgrat bietet nur Struktur, Sie sind frei zu tun, was du willst. schauen Sie sich diese tutorials für grundlegende Infos: backbonetutorials.com
InformationsquelleAutor Sander
3

Beim arbeiten in einem view-Funktion.$ bezieht sich auf diese.el. Sehen Sie diesen code in backbone.js wo die view-Klasse definiert ist, ist dies die $ Instanz bist du eigentlich mit :
```
//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);
},
```
So, in diesem.$ ist nicht $ wie Sie wissen, wenn Sie sich in einer view-Funktion. Es ist das äquivalent von scoping - $ manuell so :
```
var test = $("div", this.el)
```
Zugriff auf das Globale $ aus einer Ansicht verwenden Sie einfach $. Jedoch, der Gültigkeitsbereich $ gibt es für einen Grund, die Trennung von Bedenken. Ihre anzeigen-code sollte nur die Arbeit mit den Elementen in es. Zugriff auf $Elemente außerhalb einer view wieder einführt spaghetti-code, der genau das, was Rückgrat ist vorgesehen, um zu vermeiden,

Alternativ können Sie nur falsch verstanden, die verschiedenen Möglichkeiten, dass die el kann initialisiert werden. Mithilfe der tagName-Eigenschaft in der view-definition (und auch nicht vorbei an el in der view-Konstruktor) sagen Sie Rückgrat, um erstellen Sie einen div-container für Ihre Ansicht, die die Standard-tagName sowieso, so dass es nicht notwendig ist.

Um eine Ansicht auf eine bestimmte bereits vorhandene element, verwenden Sie einen Selektor als el in Ihrer view-definition eg;
```
TestView = Backbone.View.extend({
    el: "#test_div",
```
InformationsquelleAutor Typo Johnson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.