Как взаимодействовать между модулями javascript

Question

У меня есть веб-страница, подкрепленная некоторыми нокаутами и набором облаков, и она работает хорошо. Я хочу улучшить то, что у меня есть, добавив бесконечную прокрутку (и, таким образом, получить больше данных из базы данных и т. Д.). То, что я еще не понимаю, теперь состоит в том, чтобы структурировать программу, чтобы, возможно, общаться между модулями Java-скриптов. Это лучше всего объяснить пример кода:

window.addEventListener('cloudkitloaded', function() { 
    // . 
    // . 
    // . 
    ko.applyBindings(new TrafficCamNZViewModel());      
}); 

и это

window.addEventListener('scroll', function(event) 
{ 
    var element = event.target; 

    if (element.activeElement.scrollTop + element.body.clientHeight > document.height - 100) 
    { 
     console.log('We\'re near rock bottom'); 
    } 
}); 

Так что это позволяет мне обнаружить веб-страницы прокрутки и удара снизу. Как сообщить модулю облачного набора, что он должен что-то сделать?

Answer 1

Позвольте мне рассмотреть ваш вопрос, как вы отметили его (с нокаутом, а не облачным). Часть нокаута относительно проста.

Опция вы (просто добавить прослушиватель событий для прокрутки) может работу, конечно, в данном случае, хотя обычно вы используете связывающую обработчик для него:

function ViewModel() { 
 
    var self = this; 
 
    
 
    self.onScroll = function(data, evt) { 
 
    // here you have access to the relevant view model, as 
 
    // well as the original event, and you can inform cloud 
 
    // kit that it should further scroll 
 
    console.log("Scrolling..."); 
 
    }; 
 
    
 
    self.items = ko.observableArray([]); 
 
} 
 

 
var vm = new ViewModel(); 
 

 
for (var i=0; i<25; i++) { vm.items.push(i); } // dummy data 
 

 
ko.applyBindings(vm);

div { height: 100px; background: snow; overflow-y: scroll; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div data-bind="event: { scroll: onScroll }"> 
 
<ul data-bind="foreach: items"> 
 
    <li data-bind="text: $data"></li> 
 
</ul> 
 
</div>

(У фрагментов флагов, похоже, есть проблемы с песочницей/безопасностью с использованием evt, поэтому невозможно завершить всю демоверсию, оставив в качестве упражнения для чтения.)

Если бит взаимодействия DOM становится тяжелым или вы хотите его повторно использовать в местах, я предлагаю не размещать его в модели представления, а вместо этого создавать для него a custom binding.

Что касается Cloudkit ... Я не уверен, я не знаком с этой библиотекой. Вы можете немного переписать свой текущий вопрос, чтобы полностью узнать о части KnockoutJS и попросить второй на cloudkit. Или, вы можете переписать (и самое главное: retag) свой текущий вопрос, чтобы более четко спросить о части Cloudkit (включите то, что вы пробовали/исследовали в этой библиотеке!), Тем самым частично отменяя мой ответ (так что пингуйте в комментарии если вы выберете этот вариант, чтобы я мог решить, удалить ли мой ответ или нет).