У меня есть файл, который должен запускаться при загрузке страницы (randomise_colors.js), но также должен вызываться другим файлом как часть функции обратного вызова (в Infinite_scroll.js). Скрипт randomise_colors просто перебирает список сообщений на странице и назначает каждому цвет из массива, который используется во внешнем интерфейсе.
Infinite Scroll загружает новые сообщения в DOM одним нажатием кнопки, но поскольку файл randomise_colors.js уже запущен при загрузке страницы, это не влияет на новый загружаемый контент, поэтому мне нужно запустить его снова. Я открыт для других предложений, если звучит так, будто я могу решить проблему по-другому, я не эксперт JS.
В настоящее время я получаю Uncaught ReferenceError: randomise_colours не определен, ссылаясь на эту строку бесконечного_scroll.js:
randomise_colours.init();
Я вызываю все файлы, которые необходимо загрузить в document.ready, в app.js.
require(['base/randomise-colours', 'base/infinite-scroll'],
function(randomise_colours, infinite_scroll) {
var $ = jQuery;
$(document).ready(function() {
infinite_scroll.init();
randomise_colours.init();
});
}
);
Это infinite_scroll.js, который инициализирует бесконечную прокрутку и содержит обратный вызов. Функция обратного вызова запускается всякий раз, когда новые элементы загружаются через AJAX с помощью плагина Infinite Scroll jQuery. Я поставил звездочку вокруг области, где мне нужно запустить функцию randomise_colors.init() из randomise_colors.js.
define(['infinitescroll'], function() {
var $ = jQuery,
$loadMore = $('.load-more-posts a');
function addClasses() {
**randomise_colours.init();**
};
return {
init: function() {
if($loadMore.length >= 1) {
this.setUp();
} else {
return false;
}
},
setUp: function() {
this.initInfiniteScroll();
},
initInfiniteScroll: function() {
$('.article-listing').infinitescroll({
navSelector : '.load-more-posts',
nextSelector : '.load-more-posts a',
itemSelector : '.standard-post'
}, function(newItems) {
addClasses();
});
//Unbind the standard scroll-load function
$(window).unbind('.infscr');
//Click handler to retrieve new posts
$loadMore.on('click', function() {
$('.article-listing').infinitescroll('retrieve');
return false;
});
}
};
});
И это мой файл randomise_colors.js, который отлично работает при загрузке, но его нужно повторно вызывать после загрузки нового содержимого.
define([], function() {
var $ = jQuery,
$colouredSlide = $('.image-overlay'),
colours = ['#e4cba3', '#867d75', '#e1ecb9', '#f5f08a'],
used = [];
function pickRandomColour() {
if(colours.length == 0) {
colours.push.apply(colours, used);
used = [];
}
var selected = colours[Math.floor(Math.random() * colours.length)];
var getSelectedIndex = colours.indexOf(selected);
colours.splice(getSelectedIndex, 1);
used.push(selected);
return selected;
};
return {
init: function() {
if($colouredSlide.length >= 1) {
this.setUp();
} else {
return false;
}
},
setUp: function() {
this.randomiseColours();
},
randomiseColours: function() {
console.log('randomise');
$colouredSlide.each(function() {
var newColour = pickRandomColour();
$(this).css('background', newColour);
});
}
};
});
