Anfügen von backbone.js Ansichten zu vorhandenen Elementen vs. Einfügen von el in das DOM

Question

Ich implementiere meine erste tatsächliche Nicht-Tutorial-Backbone-App und habe 2-Fragen zu einem Aspekt der Verwendung von backbone.js, die sich nicht absetzt sehr gut mit mir, die bezieht sich auf eine Ansicht gerendert el in das DOM vs. unter Verwendung eines vorhandenen Elements für el. Ich vermute, ich werde euch hier alle mit ein paar "lehrbaren Momenten" versorgen und schätze die Hilfe. Die meisten Backbone-View-Beispiele, die ich im Web sehe, geben TagName, ID und/oder Klassenname an, wenn eine View erstellt wird und dadurch ein El erzeugt wird, das nicht vom DOM getrennt ist. Sie sehen normalerweise so etwas wie:

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

Aber die Übungen nicht immer umgehen zu erklären, wie sie das gemacht el in das DOM empfehlen, sich. Ich habe es ein paar verschiedene Möglichkeiten gesehen. Also, meine erste Frage ist: Wo ist der richtige Ort, um die Render-Methode einer View aufzurufen und ihre el in das DOM einzufügen? (nicht unbedingt 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 all das funktioniert, aber gibt es einen richtigen Weg?

Zweitens, ich beginne mit einigen HTML Markup/Wireframe, und konvertieren HTML-Teile in JS-Vorlagen entsprechend Backbone-Ansichten. Anstatt die Ansicht ein losgelöstes Element rendern zu lassen und einen Ankerpunkt im HTML-Code zum Einkleben bereitzustellen, fühle ich mich natürlicher, wenn es nur ein Element für eine Ansicht gibt und es nicht verschwinden wird. ein vorhandenes, entleertes Wrapperelement (oft div oder span) als el selbst zu verwenden. Auf diese Weise muss ich keine Sorge über die Stelle im Dokument zu finden, meine ungebunden el einzufügen, die möglicherweise wie folgt aus (beachten Sie die zusätzliche Schichtung) am Ende aussehen würde:

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

So Teil meiner zweiten Frage Ist für eine im Wesentlichen statische Ansicht etwas falsch daran, ein vorhandenes Element aus dem HTML der Seite direkt als el meiner Ansicht zu verwenden? Auf diese Weise weiß ich, dass es bereits im DOM an der richtigen Stelle ist, und dass das aufrufende Rendering die Ansicht auf der Seite sofort rendern wird. Ich würde dies erreichen, indem ich das bereits existierende Element als "el" an den Constancesruder meiner Meinung weitergeben würde. Auf diese Weise, so scheint es mir, muss ich mir keine Sorgen darüber machen, es in das DOM zu stecken (was Frage 1 irgendwie fragwürdig macht), und das Aufrufen 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, dies für statische Ansichten auf der Seite zu tun? Das heißt, es gibt nur eine dieser Ansichten, und sie wird unter keinen Umständen verschwinden. Oder gibt es einen besseren Weg? Ich erkenne, dass es verschiedene Möglichkeiten gibt, Dinge zu tun (zB in einem Router, in einer übergeordneten Ansicht, beim Laden der Seite usw.), basierend auf der Verwendung einer Ansicht, aber momentan schaue ich auf die anfängliche Seitenladung Anwendungsfall.

Dank

Answer 1

Es gibt absolut nichts falsch mit der Idee, einen Blick auf eine vorhandene DOM-Knoten des Anbringens.

Sie können auch einfach das el als eine Eigenschaft auf Ihre Sicht setzen.

Was ich empfehle ist, tun, was funktioniert ... Die Schönheit von Backbone ist, dass es flexibel ist und Ihre Bedürfnisse erfüllen wird.

Soweit allgemeine Muster betrifft, finde ich im Allgemeinen eine Hauptansicht, um über Ansichten zu verfolgen, dann vielleicht eine Listenansicht und einzelne Artikelansichten.

Ein weiteres gemeinsames Muster so weit wie Initialisierung betrifft, ist eine Art von App-Objekt zu haben, Sachen zu verwalten ...

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 aber, es gibt wirklich keine falsche Art und Weise, Dinge zu tun, nur mach was funktioniert. :)

Fühlen Sie sich frei, mich auf twitter @ jcreamer898 zu schlagen, wenn Sie weitere Hilfe benötigen, überprüfen Sie auch @derickbailey, er ist eine Art BB-Guru.

Viel Spaß!

Answer 2

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') 
    }); 
}); 

Answer 3

Verwenden Delegat Ereignisse Methode:

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

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

Answer 4

auch in diesen Tagen Sieht aus wie Sie setElement youse können.