2013-08-26 6 views
2

Каков наилучший способ предварительной печати следующей страницы в backbone.js? Есть ли встроенный механизм для этого, или я должен сам позаботиться об этом, сделав Ajax-вызовы и сохраняя результаты. Кроме того, есть ли способ предварительной загрузки всей страницы, например, в JQuery mobile (http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html)Каковы наилучшие методы предварительной выборки в backbone.js?

ответ

2

Существует не встроенная поддержка такой вещи. Это зависит от вашего варианта использования, но вы можете сделать несколько вещей.

1) Используйте setTime(), чтобы подождать короткое время, прежде чем извлекать данные, которые могут потребоваться в ближайшее время. (Вероятно, не является хорошим решением)

2) Настройка обработчика событий для извлечения данных о конкретном событии, или что-то подобное:

$('#my-button').on('hover',function() { 
//fetch data 
}); 

Для извлечения данных можно использовать выборку() функции на базовой модели или коллекции, которая вернет jqXHR (или вы можете использовать прямой вызов $ .ajax()). Вы можете подождать и посмотреть, не сработало или не прошло:

var fetch = myModel.fetch(); 
fetch.done(function(data) { 
    // Do something with data, maybe store it in a variable than you can later use 
}) 
.fail(function(jqXHR) { 
    // Handle the failed ajax call 
    // Use the jqXHR to get the response text and/or response status to do something useful 

}); 
+0

Спасибо! Когда я предварительно загружаю данные, как я узнаю, была ли она уже загружена (предварительная выборка завершена), или мне нужно ее дождаться? (Я ищу чистый способ сделать это) – EugeneMi

+0

Отредактировал свой ответ – Meistro

+0

setTime - ужасная страшная идея. Другой ответ в порядке, хотя! – Trip

0

Нет встроенной поддержки, но на самом деле ее легко добавить. Пожалуйста, обратитесь к концепции View Manager, она может обрабатывать как задачи «наблюдения», так и transitions.

Вкратце, концепция такова: диспетчер представлений является компонентом, который можно использовать для переключения с одного вида приложения на другой. Это будет dispose существующий вид, поэтому он предотвращает утечки зомби и памяти. Также он может обрабатывать переходы между переключателем вида.

0

Здесь мой способ, как я обрабатываю загрузку страниц в список «бесконечных прокруток».

сделать вас BACKEND постраничной известно

Прежде всего, вам потребуется бэкенд БД, которая способна запросов нагрузки Handlling страниц: В качестве примера сослаться на мой мерзавца modelloader проект, который предоставляет основанный на небольшой кофе интегрированную структуру в среду Node.js/Moongoose.

Model Loader on GIT будет содержать дополнительную информацию и образцы.

Вот наиболее важные моменты:

Вы бэкенд должны поддерживать следующее разбиение на страницах есть

Каждый запрос будет возвращать частичный ответ только ограничивая его, например, 20 записей (размер страницы).

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

{ 
    _maxRec: "3", 
    _limit: "20", 
    _offset: "0" 
} 
  • _maxRec перечислит общее количество записей в коллекции
  • _limit перечислит максимальное количество запросов, которые отдаются
  • _offset расскажет вам, какой набор записей был передан обратно, я.е. _offset из 200 будет означать, что список результатов пропустил первые 199 записей и представлены записи из 200-220

Бэкэнд должен поддерживать следующие параметры управления нумерацией страниц:

http(s)://<yourDomainName>/<versionId</<collection>?offset=<number> 

Используйте offset пропустить ряд например, с лимитом 20, вы отправите первый запрос с offset=0, затем offset=20, затем offset=40 и т. д., пока не достигнете _maxRec.

В целях снижения ДБ деятельности вы должны предоставить Possiblity, чтобы уменьшить вычисление _maxRec для последующих запросов:

http(s)://<yourDomainName>/<versionId</<collection>?maxRec=<number> 

Передавая в качестве параметра maxRec (как правило, один получил более ранним пейджинговой requerst), обработчик запроса будет передавать спецификацию объектов подсчета базы данных, что приводит к меньшему снижению активности db (оптимизация производительности). Пропущенный номер будет возвращен через запись _maxRec. Обычно потребитель получает в первом запросе номер _maxRec и передает его для последующего запроса, что приводит к более быстрому запросу доступа к данным.

Огня запросов Backbone модели при необходимости

Итак, теперь вы должны реализовать на стороне Backbone стрельбу из нагрузочных запросов страниц при необходимости.

В приведенном ниже примере мы предполагаем, что есть Backbone.View, который имеет список, загруженный в HTML-элемент на основе jquery.tinyscrollbar. Список содержит первые 20 записей, загруженных через URL, когда построен первоначально:

http(s)://<yourDomainName>/<versionId</<collection>?offset=0 

View будет слушать в этом случае следующей прокрутки событий

events: 
'mousewheel': 'checkScroll' 
'mousemove': 'checkScroll' 

Гол, как только пользователь прокручиваются вниз до прокручиваемого списка (например, он достигает точки, которая на 30 пикселей выше конечной точки прокручиваемого списка), запрос будет запущен для загрузки следующих 20 записей. В следующем примере кода desrcribes необходимый шаг:

checkScroll: () => 
    # We calculate the actual scroll point within the list 
    ttop = $(".thumb").css("top") 
    ttop = ttop.substring(0,ttop.length-2) 
    theight = $(".thumb").css("height") 
    theight = theight.substring(0,theight.length-2) 
    triggerPoint = 30 # 30px from the bottom 
    fh = parseFloat(ttop)+parseFloat(theight)+triggerPoint 
    # The if will turn true if the end of the scrollable list 
    # is below 30 pixel, as well as no other loading request is 
    # actually ongoing 
    if fh > @scrollbarheight && ! @isLoading && @endLessScrolling 
     # Make sure that during fetch phase no other request intercepts 
     @isLoading = true 
     log.debug "BaseListView.checkscroll "+ ttop + "/"+ theight + "/"+ fh 
     # So let's increase the offset by the limit 
     # BTW these two variables (limit, offset) will be retrieved 
     # and updated by the render method when it's getting back 
     # the response of the request (not shown here) 
     skipRec = @[email protected] 
     # Now set the model URL and trigger the fetch 
     @model.url = @baseURL+"?offset="+skipRec+"&maxRec="[email protected] 
     @model.fetch 
      update: true 
      remove: false 
      merge: false 
      add: true 
      success: (collection, response, options) => 
       # Set isLoading to false, as well as 
       # the URL to the original one 
       @isLoading = false 
       @model.url = @baseURL 
      error: (collection, xhr, options) => 
       @isLoading = false 
       @model.url = @baseURL 

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

Это будет загружать все данные в порядке очереди.

Смежные вопросы