javascript - javascript模块之间如何通信

Question

我有一个网页，由一些knockoutjs通过云套件支持，并且运行良好。我想通过添加无限滚动来增强我所拥有的功能(从而从数据库等中获取更多数据)。我现在还不明白的是如何构造程序以便在 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

让我按照您标记的方式来处理您的问题(使用 knockoutjs 而不是 cloudkit)。 knockout 部分相对简单。

您拥有的选项(只需添加用于滚动的事件监听器)可以工作，当然在这种特殊情况下，尽管通常您为其使用绑定(bind)处理程序:

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 交互位变得繁重，或者您想在某些地方重用它，我建议不要将其放置在 View 模型中，而是创建 a custom binding为了它。

就 Cloudkit 而言...我不确定，我对那个库不熟悉。您可以稍微重写当前的问题，使其完全只涉及 KnockoutJS 部分，然后在 cloudkit 上询问第二个问题。或者，您可以重写(最重要的是:重新标记)您当前的问题，以更清楚地询问 Cloudkit 部分(包括您在该库上尝试/研究过的内容!)，从而使我的答案部分无效(因此请在评论中告诉我)如果您选择此选项，以便我可以决定是否删除我的答案)。