Wie strukturieren Sie Ihre Webanwendungen, um Ajax und DHTML zu erleichtern?

StackOverflow https://stackoverflow.com/questions/8346437

Frage

Angesichts dieser Struktur für einen Websinten

<html>
  <head>
    <!-- CSS at the beginning-->
    <link/>
  </head>
  <body>
    <div id="mainContainer">
      <div id="side"></div>
      <div id="content">
         <!-- DHTML awesomeness happens here -->
      </div>
    </div>
    <!-- Scripts at the end -->
    <script/>
    <script>
         /* code that attach the JS logic to the HTML items */
    </script>
  </body>
</html>

Mit der normalen Webnavigation wird die Seite in HTML vollständig wiedergegeben. Nach dem progressiven Verbesserungsansatz suche ich am Ende nach bestimmten IDs oder Klassen und gebe ihnen ein dynamisches Verhalten mit JavaScript und speziell JQuery. Dieser Verbesserungscode findet am Ende des Körpers statt, nachdem die externen Skripte heruntergeladen wurden.

Im #content, Es kommt zu viel JQuery -Ajax -Interaktionen, einige von ihnen erhalten andere teilweise Ansichten vom Server und fügen sie in die Seite ein, aber dann muss ich wieder nach diesen IDs und Klassen suchen und JavaScript -Objekten an diese neuen Elemente anhängen.

Es könnte sehr umständlich sein, da Sie Controller, Ereignishandler oder was auch immer an Objekte, die sie bereits haben, erneut anwenden möchten.

Bisher ist die einzige Lösung, die ich gefunden habe, in meine Teilansichten:

@if(Request.IsAjaxRequest())
{
   <script> 
       /* code that attach the JS controllers to the HTML items of this view */
   </script>
}

Ich denke, dass ein ähnliches Problem zum Beispiel auftritt, wenn Sie wollen $('input.date').datepicker() und Sie fügen neue hinzu <input type="text" class="date"/> Elemente dynamisch haben die neuen keine Datumswählerin, es sei denn, Sie verwenden den Jquery -Satz erneut.

Zum Beispiel in Anbetracht dessen in #content ich habe ein <input type="text" class="date"/>:

  1. Um den Jquery Datepicer das erste Mal zum Laufen zu bringen, muss ich anrufen $('input.date').datepicker() am Ende von <body>nach dem äußeren <script> Erklärungen.

  2. Wenn die Seite teilweise Ansichten herunterladen, wo sind neu <input type="text" class="date"/>Elemente, ich muss den Initialisierungsaufruf in die Ansicht für Ajax -Anrufe einsetzen.

Also ende ich mit wiederholtem Code, etwas, das ich nicht speziell in JS möchte, wo ich den Code nicht so einfach neu aufstellen kann wie in C#.

Dies ist etwas, das mich in der letzten Woche verrückt macht und sich fragt, ob es einen besseren Weg gibt, dies zu erreichen? Eine bessere Technik oder einen anderen ganzen Ansatz?

Wie strukturieren Sie Ihre Webanwendungen?

Mit freundlichen Grüßen.

PS: Wäre schön, so etwas zu haben .live() oder .delegate() Aber nicht nur mit Ereignissen verwandt, nicht wahr? Gibt es kein Ereignis, das JQuery/Browser jedes Mal aufwirft, wenn etwas dem DOM hinzugefügt wird?

War es hilfreich?

Lösung

Dies ist möglicherweise nur eine teilweise Antwort auf Ihre Frage, wenn ich sie richtig verstehe.

In Bezug auf Ihr Beispiel mit <input type="text" class="date" />, Wir haben ein ähnliches Problem mit unseren Teilformularansichten erlebt, die jQuery unauffällige Validierung verwenden. Beim Laden im Browser mussten wir anrufen $.validator.unobtrusive.parse('a form selector'); Um die Validierungsregeln während der nächsten Einreichung des Formulars zu bewerben.

Wenn Ihr Ziel darin besteht, wiederholten Code zu vermeiden, können Sie Ihre JS -Aktionen unauffällig machen, indem Sie ein Muster wie in der JQ Unbovis Validation LIB verwenden. Sie würden also mit HTML enden, der eher so aussieht:

<input type="text" class="date" data-datepicker="true" />

Sie können dann die Initialisierungslogik in eine unauffällige Parse -Methode einfügen.

parse: function(selector) {
    $(selector).find(':input[data-datepicker=true]').each(function() {
        $(this).datepicker();
    }
};

}

Dies löst Ihr Problem, einen Ort zu haben, an dem der Code neu gestaltet wird. Sie können es automatisch starten, wenn die Seite zum ersten Mal geladen wird. Wenn Sie neue Inhalte über AJAX laden, können Sie die Regel auf alle übereinstimmenden Elemente anwenden, indem Sie nur anrufen myAppNamespace.unobtrusive.parse('selector for the partial view content');

Aktualisieren

Schauen Sie sich die Datei jQuery.Validate.unoBtusive.js in Ihrem Skriptsordner an. Es ist wirklich ziemlich klug, und wenn Sie kein anderes JQuery -Plugin (wie Validate) nicht erweitern, würde Ihr Code viel schlanker. Wenn Sie nach einer vollständigen Trennung von HTML und Skript suchen, ist die Verwendung der HTML5-Attribute mit den unauffälligen Daten von HTML5 eine gute Lösung IMO.

Andere Tipps

Ich habe die @OliveHour -Antwort als korrekt markiert, da sie eine gute Lösung für das Problem angibt.

Was ich endlich getan habe, ist, die JQuery-Datei auf den Kopf zu verschieben, und nur die JQuery-Datei, die rest wie "jQuery-ui" oder benutzerdefinierte JS-Dateien sind noch unten.

Der Grund ist die Möglichkeit zu verwenden $(document).ready oder $(function(){}), Da der Code das in der Ansicht verwendet, wird der Code auf "Onload" oder direkt ausgeführt, wenn die "Onload" bereits angehoben wurde, was perfekt für das ist, was ich will.

Prost.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top