Comment structurez-vous vos applications Web afin de rendre AJAX et DHTML plus facile?

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

Question

Compte tenu de cette structure pour une websinte 

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

Utilisation de la navigation Web normale, la page rend tout à fait en HTML, et suivant l'approche d'amélioration progressive, à la fin, je cherche des ids spécifiques ou des classes, et je leur donne un comportement dynamique à l'aide javascript et spécialement jQuery. Ce code d'amélioration se produit à la fin du corps, après que les scripts externes a été téléchargé.

Dans #content, beaucoup d'interactions jQuery AJAX arrive, certains d'entre eux obtenir d'autres vues partielles du serveur et de les insérer dans la page, mais je dois chercher les IDs et classes encore et attacher des objets javascript à ce nouveaux éléments .

Il pourrait être très lourd, puisque vous ne voulez pas les contrôleurs Réappliquer, gestionnaires d'événements ou tout à des objets qui ont déjà.

Jusqu'à présent, la seule solution que j'ai trouvé est mis dans mes vues partielles: 

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

Je pense qu'un problème similaire se produit par exemple lorsque vous voulez $('input.date').datepicker(), et vous ajoutez de nouveaux éléments <input type="text" class="date"/> dynamiquement, les nouvelles ont pas sélecteur de date, sauf si vous rexecute la peine de jQuery.

Par exemple, étant donné que je #content un <input type="text" class="date"/>:

  1. Afin de rendre le travail jQuery datepicer la première fois, je dois appel $('input.date').datepicker() à la fin de la <body>, après les déclarations de <script> externes.

  2. Si les vues partielles de téléchargement de la page où sont nouveaux <input type="text" class="date"/> éléments, je dois mettre l'appel d'initialisation dans la vue pour ajax appels.

Je fin avec le code répété, quelque chose que je ne veux pas spécialement à JS où je ne peux pas factoriser le code aussi facilement que dans C #.

Ceci est quelque chose qui me rend dingue la semaine dernière, se demandant s'il y a une meilleure façon d'y parvenir? Une meilleure technique, ou une autre approche globale?

Comment structurez-vous vos applications Web?

Amicalement.

PS: serait-il agréable d'avoir quelque chose comme .live() ou .delegate() mais non seulement liés à des événements, ne serait-il? N'y at-il un événement qui jQuery / navigateur pose chaque fois que quelque chose est ajouté au DOM?

Était-ce utile?

La solution

Cela ne peut être une réponse partielle à votre question, si je comprends bien.

En ce qui concerne votre exemple avec <input type="text" class="date" />, nous avons connu un problème similaire avec notre point de vue de la forme partielle qui utilisent jQuery validation discrète. Lorsque les charger dans le navigateur, nous avons dû appeler $.validator.unobtrusive.parse('a form selector'); afin d'obtenir les règles de validation à appliquer lors de la prochaine soumission du formulaire.

Si votre objectif est d'éviter le code répété, vous pouvez faire vos actions js discrète, en utilisant un modèle comme dans la validation discrète JQ lib. Donc, vous finiriez avec HTML qui ressemble plus à ceci: 

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

Vous pouvez ensuite mettre la logique d'initialisation dans une méthode d'analyse discrète. 

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

}

Cela résout votre problème d'avoir un endroit à factoriser le code. Vous pouvez le faire démarrer automatiquement lorsque la page charges, et lorsque vous chargez du nouveau contenu via ajax, vous pouvez appliquer la règle à tous les éléments correspondants simplement en appelant myAppNamespace.unobtrusive.parse('selector for the partial view content');

Mise à jour

Jetez un coup d'oeil au fichier jquery.validate.unobtrusive.js dans votre dossier scripts. Il est vraiment très intelligent, et si vous n'êtes pas étendre en fait un autre plugin jquery (validate), votre code finirait par un mince lot. Si vous cherchez une séparation complète de HTML et de script, en utilisant les attributs HTML5 Data- discrète est une bonne solution imo.

Autres conseils

J'ai marqué la réponse @olivehour comme correct, car il indique une bonne solution pour le problème.

Ce que j'ai enfin fait, est de déplacer le fichier jquery à la tête, et juste le fichier jquery, le reste comme « jquery-ui », ou les fichiers personnalisés sont toujours en bas.

La raison est d'être capable d'utiliser $(document).ready ou $(function(){}), puisque l'utilisation que sur la vue, le code est exécuté sur « onload » ou immédiatement si le « onload » a déjà été soulevée, ce qui est parfait pour ce que je veux.

Vive.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top