Как вы структурируете свои веб -приложения, чтобы облегчить AJAX и DHTML?

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

Вопрос

Учитывая эту структуру для веб -сайта

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

Используя обычную веб -навигацию, страница полностью отображается в HTML, и, следуя подходу прогрессивного улучшения, в конце я ищу некоторые конкретные идентификаторы или классы, и я даю им динамическое поведение с использованием JavaScript и специально JQUERY. Этот код улучшения происходит в самом конце тела после загрузки внешних сценариев.

В #content, происходит много взаимодействий jQuery Ajax, некоторые из них получают другие частичные представления от сервера и вставляют их на странице, но тогда я должен снова искать эти идентификаторы и классы и прикрепить объекты JavaScript к этим новым элементам.

Это может быть очень громоздко, так как вы не хотите повторно применить контроллеры, обработчики событий или что -то в этом роде для объектов, у которых их уже есть.

До сих пор единственное решение, которое я нашел, - это приведено в мои частичные взгляды:

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

Я думаю, что подобная проблема происходит, например, когда вы хотите $('input.date').datepicker() и вы добавляете новый <input type="text" class="date"/> Элементы динамично, у новых не есть выборщик даты, если вы не зарегистрируете предложение jQuery.

Например, учитывая это в #content у меня есть <input type="text" class="date"/>:

  1. Для того, чтобы заставить jQuery DatePicer работать в первый раз, я должен позвонить $('input.date').datepicker() в конце <body>, после внешнего <script> декларации.

  2. Если страница скачать частичные представления, где новые <input type="text" class="date"/>Элементы, я должен поместить вызов инициализации в представление для вызовов Ajax.

Поэтому я заканчиваю повторяющимся кодом, чем я не хочу специально в JS, где я не могу рефакторировать код так же легко, как в C#.

Это то, что сводит меня с ума на прошлой неделе, задаваясь вопросом, есть ли лучший способ сделать это? Лучшая техника или другой подход?

Как вы структурируете свои веб -приложения?

С уважением.

PS: было бы неплохо иметь что -то вроде .live() или же .delegate() Но не только связано с событиями, не так ли? Нет ли нет никакого события, которое JQuery/Browser поднимает каждый раз, когда что -то добавляется в DOM?

Это было полезно?

Решение

Это может быть только частичным ответом на ваш вопрос, если я правильно его понимаю.

Что касается вашего примера с <input type="text" class="date" />, Мы столкнулись с аналогичной проблемой с нашими частичными видами форм, которые используют ненавязчивую проверку jQuery. При загрузке их в браузер мы должны были позвонить $.validator.unobtrusive.parse('a form selector'); Чтобы получить правила проверки применять в течение следующей подчинения формы.

Если ваша цель состоит в том, чтобы избежать повторного кода, вы можете сделать свои действия JS ненавязчивыми, используя образец, как в JQ ненавязчивой валидации Lib. Таким образом, вы получите HTML, который больше похож на это:

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

Затем вы можете поместить логику инициализации в неправильный метод анализа.

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

}

Это решает вашу проблему иметь одно место для рефакторирования кода. Вы можете запустить его автоматически при первой загрузке страницы, и когда вы загружаете новый контент через AJAX, вы можете применить правило ко всем соответствующим элементам, просто вызывая myAppNamespace.unobtrusive.parse('selector for the partial view content');

Обновлять

Посмотрите на файл jquery.validate.unobtrusize.js в папке сценариев. Это действительно довольно умно, и если вы на самом деле не расширяете другой плагин jQuery (например, Validate), ваш код в конечном итоге станет намного стройнее. Если вы ищете полное разделение HTML и сценария, использование ненавязчивых данных HTML5- хорошее решение.

Другие советы

Я пометил ответ @olivehour как правильный, поскольку в нем говорится хорошее решение для проблемы.

То, что я наконец сделал,-это перемещение файла jQuery в голову, а только файл jQuery, остальные, такие как «jquery-ui», или пользовательские файлы JS все еще находятся внизу.

Причина в том, чтобы использовать $(document).ready или же $(function(){}), С момента использования этого в представлении код выполняется на «Onload» или сразу, если «Onload» уже поднят, что идеально подходит для того, что я хочу.

Ваше здоровье.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top