Есть выдача товара, выводятся допустим по 20 штук, при этом есть огромный фильтр и подгрузка по скроллу. Сейчас это 2 разных скрипта, но хотелось бы объединить в один и вынести построение DOM в отдельную функцию.
В каждом из вызовов есть 2 отличающихся друг от друга момента, при получении ответа, когда что-либо изменилось в фильтре шлю данные, получаю ответ и использую
$('.container').html(html);, в то время как при подгрузке скроллом
$(html).appendTo('.container');.
Код для подгрузки скроллом:
function scrollLoad (){
var pages = 1;
var load = true;
$(document).on('scroll', function () {
if (load) {
var $heightContainer = $('.container').height() - 500;
if($(this).scrollTop() > $blockBarContainer) {
load = false;
pages++;
$.getJSON('/someURl/' + pages, function(data){
var items = data.items;
if (items.length !== 0) {
var html = '';
$.each(items, function(key, val){
html += '<li class="item">' +
'<div class="item-wrap">';
html += val.someInfo +
'</div>' +
'</li>';
$(html).appendTo('.container');
html = '';
load = true;
});
} else {
// var html = '';
load = false;
}
})
}
}
});
}
Код для фильтра:
function filterLoad() {
var ajaxTimeout = false,
delayBeforeSend = '';
var data = $('.filter').serialize();
function sendForm() {
$.getJSON('/someURl/', data, function(data){
var items = data.items;
if (items.length !== 0) {
var html = '';
$.each(items, function(key, val){
html += '<li class="item">' +
'<div class="item-wrap">';
html += val.someInfo +
'</div>' +
'</li>';
$('.container').html(html);
});
} else {
var html = '';
}
})
}
if (ajaxTimeout) clearTimeout(ajaxTimeout);
loadSubscriptions();
ajaxTimeout = setTimeout(sendForm, delayBeforeSend);
}
Использую именно
getJSON(), так как удобнее.
Вопрос в следующем: как вынести построение DOM в отдельную функцию, но при этом чтобы можно было указать options.
Задачи:
- Не забыть о цикле который есть, а конкретно о
var items = data.items;
- А также настраиваемые
.append() и .html()
P.S. Естественно, я не жду готового решения, просто подсказки в каком направлении копать.
