使用 JQueryUI Autocomplete 和 Meteor 的规范方法

2024-05-11

使用 Meteor,我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法。

我有两个工作提案,想听听关于差异的意见,以及是否有更好的方法来做同样的事情。

使用发布/订阅:

// Server
Meteor.publish("autocompleteData", function (theSearchTerm) {
  var query = {
    name: { $regex: theSearchTerm, $options: 'i'}
  };

  return MyData.find(query, options);
});

// Client
Template.myTemplate.rendered = function() {
  initAutocomplete($(this.find('.my.autocomplete')));
};

var initAutocomplete = function(element){
  element.customAutocomplete({
    source: function(request, callback){
      var sub = Meteor.subscribe('autocompleteData', request.term, function(){
        var results = MyData.find({}, {limit: 50}).fetch();
        sub.stop();
        callback(results);
      });
    },
    select: function(event, ui){
      // Do stuff with selected value
    }
  });
};

使用远程函数(Meteor.Methods):

// Server
Meteor.methods({
  getData: function(theSearchTerm) {
    var query = {
      name: { $regex: theSearchTerm, $options: 'i'}
    };

    return MyData.find(query, {limit: 50}).fetch();
  });
});

// Client
Template.myTemplate.rendered = function() {
  initAutocomplete($(this.find('.my.autocomplete')));
};

var initAutocomplete = function(element){
  element.customAutocomplete({
    source: function(request, callback){
      Meteor.call('getData', request.term, function(err, results){
        callback(results);
      });
    },
    select: function(event, ui){
      // Do stuff with selected value
    }
  });
};

如果有的话,哪一种是使用 Meteor 和大型数据集设置服务器端自动完成的最有效方法?


不管怎样,我将就这个主题提出一些我的想法。声明一下,我只是一个 Meteor 爱好者,不是专家,所以如果我说的有错误,请纠正我。

对我来说,在这种情况下,发布/订阅的潜在优势似乎是数据被缓存。因此,当订阅相同的记录集时,查找将接近瞬时,因为客户端可以搜索本地缓存,而不是再次向服务器请求数据(发布足够智能,不会将重复的数据推送到客户端)。

但是,由于您停止订阅,因此这里失去了优势,因此每次用户输入相同的搜索词时,数据都会再次推送到客户端(至少,每个文档都会再次触发光标的添加事件)。在这种情况下,我希望 pub/sub 与 Meteor.call 处于几乎平等的地位。

如果想缓存pub/sub的数据,一种方法是取出sub.stop()。但是,除非您的用户倾向于搜索相似的术语,否则缓存数据实际上会更糟,因为用户每键入一个字母,就会在客户端上存储更多数据,也许永远不会再看到(除非搜索是您的应用程序中的一个突出功能)应用程序用户会从中受益吗?)。

总的来说,我认为使用 pub/sub 相对于 Meteor 方法并没有明显的优势,尽管我对 Meteor 的了解还不够深入,无法提供两者之间更具体的优点/缺点。我个人认为 Meteor 方法看起来更干净。

如果您想实现搜索功能,我个人喜欢轻松搜索 https://github.com/matteodem/meteor-easy-search包,它支持这种类型的服务器端搜索和自动完成功能。无论如何,我希望您的问题能够得到解决!我也很想知道答案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JQueryUI Autocomplete 和 Meteor 的规范方法 的相关文章

  • 在 Three.js 中绕点旋转对象的正确方法是什么?

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • 从函数返回函数的目的是什么?

    阅读一些遗留代码 发现 A prototype setSize function var v1 new Vector2 return function size var halfSize v1 copy size multiplyScala
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐