So kommunizieren Sie zwischen Javascript-Modulen

Question

Ich habe eine Webseite, die von einigen Knockoutjs durch Cloud-Kit unterstützt wird und es funktioniert gut. Ich möchte erweitern, was ich habe, indem ich unendlich scroll hinzufüge (und folglich mehr Daten von der Datenbank etc. erhalte). Was ich noch nicht verstehe, ist jetzt, das Programm so zu strukturieren, dass es zwischen Java Script Modulen kommunizieren kann. Dies wird am besten erklärt mit Beispiel-Code:

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

und diese

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'); 
    } 
}); 

So dies ermöglicht es mir, die Web-Seite Scrollen und Schlagen der Unterseite zu erkennen. Wie kann ich dem Cloud-Kit-Modul mitteilen, dass es etwas tun muss?

Answer 1

Lassen Sie mich Ihre Frage so behandeln, wie Sie sie markiert haben (mit knockoutjs und nicht mit cloudkit). Der Knockout-Teil ist relativ einfach.

Die Option, die Sie haben (nur ein Ereignis-Listener Hinzufügen zum Scrollen) kann Arbeit, sicherlich in diesem speziellen Fall, wenn Sie in der Regel eine Bindungs ​​Handler für sie verwenden:

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>

(Stack-Snippets scheinen einige Sandbox-/Sicherheitsprobleme mit der Verwendung der evt zu haben, so dass nicht die gesamte Demo abgeschlossen werden kann; als Übung für den Leser links.)

Wenn das DOM-Interaktionsbit schwer wird oder Sie es an mehreren Stellen wiederverwenden möchten, rate ich, es nicht in das Ansichtsmodell zu platzieren, sondern dafür a custom binding zu erstellen.

Soweit Cloudkit geht ... Ich bin mir nicht sicher, ich bin nicht mit dieser Bibliothek vertraut. Sie können Ihre aktuelle Frage entweder neu schreiben, um sich nur mit dem KnockoutJS-Teil zu befassen, und einen zweiten über Cloudkit stellen. Oder Sie können Ihre aktuelle Frage umschreiben (und vor allem: neu schreiben), um klarer nach dem Cloudkit-Teil zu fragen (inkludieren, was Sie in dieser Bibliothek versucht/erforscht haben!), Wodurch meine Antwort teilweise ungültig wird (also mich in einem Kommentar anpingen) Wenn Sie diese Option wählen, kann ich entscheiden, ob meine Antwort gelöscht werden soll oder nicht).