webentwicklung-frage-antwort-db.com.de

Anhängen von backbone.js-Ansichten an vorhandene Elemente und Einfügen von el in das DOM

Ich implementiere meine erste Backbone-App, die kein Tutorial ist, und habe zwei Fragen zu einem Aspekt der Verwendung von backbone.js, der sich nicht gut mit mir arrangiert. Dies bezieht sich auf das Einfügen der gerenderten el -Ansicht in das DOM im Vergleich zur Verwendung eines vorhandenen Elements für el. Ich vermute, ich werde Ihnen hier ein paar "lehrbare Momente" bieten und die Hilfe zu schätzen wissen.

Die meisten Beispiele für die Backbone-Ansicht, die ich im Web sehe, geben tagName, id und/oder className an, wenn ich eine Ansicht erstelle und damit eine E-Mail-Adresse erzeuge, die nicht mit dem DOM verbunden ist. Sie sehen normalerweise so aus:

App.MyView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
     ...
    },
    render: function () { 
        $(this.el).html(<render an html template>);
        return this;
    }
}); 

In den Tutorials wird jedoch nicht immer erklärt, wie das gerenderte Element in das DOM aufgenommen werden sollte. Ich habe es auf verschiedene Arten gesehen. Meine erste Frage lautet also: Wo ist der geeignete Ort, um die Rendermethode einer Ansicht aufzurufen und ihr el in das DOM einzufügen? (nicht notwendigerweise ein und derselbe Ort). Ich habe es in einem Router, in den Initialisierungs- oder Renderfunktionen der Ansicht oder einfach in einer Dokumentbereitschaftsfunktion auf Stammebene gesehen. ($(function ()). Ich kann mir vorstellen, dass eine dieser Arbeiten, aber gibt es einen richtigen Weg, um es zu tun?

Zweitens beginne ich mit HTML-Markups/Wireframes und konvertiere HTML-Teile in JS-Vorlagen, die Backbone-Ansichten entsprechen. Anstatt zuzulassen, dass die Ansicht ein nicht verbundenes Element darstellt und einen Ankerpunkt im HTML-Code bereitstellt, um es einzufügen, erscheint es mir natürlicher, wenn es nur ein Element für eine Ansicht gibt und es nicht verschwindet. ein vorhandenes, geleertes Wrapper-Element (häufig ein div oder span) als el selbst zu verwenden. Auf diese Weise muss ich mich nicht darum kümmern, die Stelle im Dokument zu finden, an der mein nicht angehängtes el eingefügt werden kann. Dies würde möglicherweise so aussehen (beachten Sie die zusätzliche Schichtung):

<div id="insert_the_el_in_here">  <!-- this is all that's in the original HTML doc -->
    <div id="the_el">  <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
        <!-- we're finally getting to some useful stuff in here -->
    </div>
 </div>

Ein Teil meiner zweiten Frage ist also, ob bei einer im Grunde genommen statischen Ansicht etwas falsch ist, wenn ein vorhandenes Element aus dem HTML-Code der Seite direkt als el meiner Ansicht verwendet wird. Auf diese Weise weiß ich, dass es bereits im DOM an der richtigen Stelle ist und dass beim Aufrufen von "Rendern" die Ansicht auf der Seite sofort gerendert wird. Dies würde ich erreichen, indem ich das bereits vorhandene Element als 'el' an den Konstruktor meiner Ansicht weitergebe. Auf diese Weise, so scheint es mir, muss ich mir keine Sorgen darüber machen, ob ich es in das DOM stecke (was Frage 1 in Frage stellt), und der Aufruf von render wird das DOM sofort aktualisieren. Z.B.

<form>
   <div someOtherStuff>
   </div>
   <span id="myView">
   </span>
</form>

<script type="text/template" id = "myViewContents"> . . . </script>

<script type="application/javascript">
window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          $(this.el).html(this.template());
          return this;
     }
});
$(function () {
    window.myView = new MyView({ el: $('#myView').get(0) });
});
</script>

Ist dies eine gute Möglichkeit, um statische Ansichten auf der Seite zu erstellen? es gibt nur eine dieser Ansichten und sie wird unter keinen Umständen verschwinden. Oder gibt es einen besseren Weg? Ich erkenne, dass es je nach Verwendung einer Ansicht verschiedene Möglichkeiten gibt, Dinge zu erledigen (z. B. in einem Router, in einer übergeordneten Ansicht, beim Laden von Seiten usw.), aber im Moment schaue ich auf das Laden der ersten Seite Anwendungsfall.

Vielen Dank

71
Ben Roberts

Es ist absolut nichts Falsches an der Idee, eine Ansicht an einen vorhandenen DOM-Knoten anzuhängen.

Sie können das el sogar einfach als Eigenschaft auf Ihre Ansicht setzen.

window.MyView = Backbone.View.extend( {
     el: '#myView',
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView();
});

Was ich empfehle ist, zu tun, was funktioniert ... Das Schöne an Backbone ist, dass es flexibel ist und Ihren Bedürfnissen entspricht.

Was gängige Muster betrifft, so habe ich im Allgemeinen eine Hauptansicht, um Übersichten zu verfolgen, dann möglicherweise eine Listenansicht und einzelne Elementansichten.

Ein weiteres gängiges Muster für die Initialisierung besteht darin, eine Art App-Objekt zum Verwalten von Inhalten zu haben ...

var App = (function ($, Backbone, global) {
    var init = function () {
        global.myView = new myView();
    };

    return {
        init: init
    };
}(jQuery, Backbone, window));

$(function () {
    App.init();
});

Wie ich schon sagte, es gibt wirklich keine falsche Art, Dinge zu tun, nur das zu tun, was funktioniert. :)

Zögern Sie nicht, mich auf Twitter @ jcreamer898 zu kontaktieren, wenn Sie weitere Hilfe benötigen. Schauen Sie sich auch @derickbailey an, er ist eine Art BB-Guru.

Habe Spaß!

54
jcreamer898

Sie können auch ein HTML-DOM-Element-Objekt als 'el'-Eigenschaft der Optionen in die Ansicht senden.

window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView({
        el: document.getElementById('myView')
    });
});
18
andho

Verwenden Sie die Methode zum Delegieren von Ereignissen:

initialize: function() {
    this.delegateEvents();
}

Um zu verstehen, warum: http://backbonejs.org/docs/backbone.html#section-138 in der Nähe von "Rückrufe festlegen, wo"

0
Oleksandr Knyga

Sieht auch so aus, als könntest du heutzutage setElement wählen.

0
pixelearth