Блог

Главная - Вопросы по программированию - Магистральный рендеринг внешнего шаблона без $.get

Магистральный рендеринг внешнего шаблона без $.get

#javascript #jquery #backbone.js #asynchronous

#javascript #jquery #backbone.js #асинхронный

Вопрос:

У меня небольшая ошибка в моем приложении.

Возникает проблема с отрисовкой при загрузке внешнего шаблона.

У меня есть файл js с моим приложением backbone и отдельный html-файл для шаблона.

Мне нужно создать функцию цикла внутри моего приложения.

Это моя функция рендеринга:

 _.each(here.data_table.models, function(t) {
   $.get('js/template.html', function (data) {
         template = _.template(data, {data: t});//Option to pass any dynamic values to template
         $(here.el).find('tbody').append(template);
    }, 'html');
});

Если я напечатаю here.data_table.models , я смогу увидеть всю свою коллекцию в правильном порядке.

Но когда я печатаю, порядок не такой, случайный.

Итак, проблема, я думаю, заключается в $.get вызове, потому что он асинхронный.

Существует ли способ сделать то же самое в синхронном режиме, чтобы загрузить в исходном порядке мои данные?

Пример:

это мой here.data_table.models упрощенный порядок, если я печатаю атрибуты:

 1
2
3
4

Если я поставлю консоль.войдите в мою функцию $.get, я могу получить это:

 3
2
4
1

Другой порядок, не являющийся оригинальным, поскольку является асинхронным.

Кто-нибудь может мне помочь?

Спасибо

Комментарии:

1. Что я обычно делаю, так это помещаю такого рода вызовы в мой маршрутизатор перед передачей в представление. Просто View Действительно должен ™ (в качестве «наилучшей практики»), на самом деле не делать ничего, кроме самого рендеринга. Поэтому я бы передал ему все необходимые данные, прежде чем создавать их экземпляр..

Ответ №1:

Ваша проблема в том, что нет гарантированного порядка завершения вызовов AJAX. Однако вам нужен только один вызов AJAX, поскольку ваш $.get извлекает один и тот же шаблон снова и снова. Это означает, что вы можете вывернуть свой код наизнанку:

 $.get('js/template.html', function(t) {
  var template = _.template(t); // Just compile it once.
  _.each(here.data_table.models, function(model) {
    $(here.el).find('tbody').append(template({ data: model }));
  });
}, 'html');

По пути я переименовал несколько переменных, чтобы имена лучше соответствовали их функциям.

Кроме того, если here является экземпляром view, то вы могли бы сказать:

 here.$('tbody').append(...)

или

 var template = _.template(t);
var $tbody   = here.$('tbody');
_.each(here.data_table.models, function(model) {
  $tbody.append(...);
});

вместо расточительного:

 $(here.el).find('tbody').append(...)