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部分相对简单。

您拥有的选项（仅添加用于滚动的事件侦听器）可以工作，当然在这种特殊情况下，尽管通常您使用绑定处理程序：

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似乎在使用evt时遇到了一些沙盒/安全问题，因此无法完成整个演示;请将其留作读者练习。）

如果DOM交互位变重，或者您想在某些地方重复使用它，我建议不要将它放在视图模型中，而是为它创建a custom binding。

就Cloudkit而言...我不确定，我不熟悉那个库。你可以稍微重写你当前的问题，完全是关于KnockoutJS部分，并在cloudkit上问第二个问题。或者，您可以重写（最重要的是：重新标记）您当前的问题，以更清楚地询问Cloudkit部分（包括您在该lib上尝试/研究过的内容！），从而部分地使我的答案无效（所以在评论中ping我如果你选择这个选项，我可以决定是否删除我的答案。）

如何在javascript模块之间进行通信

1 个答案: