- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
大约一周前才开始第一次使用 Meteor,所以还在摸索中。
我对如何使用通过 npm 安装的 jQuery 插件感到困惑。
我跑过:
meteor npm install overlayscrollbars --save
已将其添加到我的 package.json
文件...
"dependencies": {
"@babel/runtime": "^7.0.0-beta.51",
"meteor-node-stubs": "^0.4.1",
"overlayscrollbars": "^1.5.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.0"
},
...但我不知道如何在 Meteor 中使用它?
我没有使用 Blaze 模板引擎,而是使用 React。
我发现一些帖子回答了类似的问题,但它们都与使用 Blaze 和非常旧的 Meteor 版本有关。
我已经运行了 jQuery,尝试并测试了一些 console.log 输出,并尝试在 main.html
中添加 js 插件文件。与标准 <script>
标签,但 Meteor 根本不喜欢这个。我也尝试将它导入到项目中:
import overlayScrollbars from 'overlayscrollbars';
也尝试过:
const overlayScrollbars = require('overlayscrollbars');
但是这些没有任何作用,老实说,我很确定这无论如何都是完全错误的方法。
我还尝试将整个插件源添加到客户端app.js
但这同样没有任何作用。
在浏览器中查看我的应用程序源时,我可以看到我想使用的文件甚至没有被 Meteor 加载 - PasteBin - 只需回答有关如何完成这部分的问题就会有很大的帮助。
我知道它不起作用,因为当我尝试启动插件时看到控制台错误,说该功能不存在。
我似乎到处都找不到指南。
有人能给我指出一些文档的正确方向,或者解释一下我需要遵循的程序才能在 Meteor 中使用任何 jQuery 插件吗?
** 编辑以显示我是如何在 main.js 中调用它的(这是在 Meteor 中使用 jQuery 的正确语法吗?)
Meteor.startup(() => {
Tracker.autorun(() => {
ReactDOM.render(<p>Sidebar</p>, document.getElementById('sidebar'));
ReactDOM.render(<App/>, document.getElementById('app'));
$(function() {
$('.main-content').overlayScrollbars({ });
});
})
});
** 回答后编辑...
我遇到的问题是由于没有在正确的页面上导入插件,我只是在 app.js 文件而不是呈现组件的模板上导入它。
此外,为了清除它的启动方式(准备好文档),调用被移动到组件中,如下所示:
componentDidMount() {
$('.main-content').overlayScrollbars({ });
}
感谢 Fred 提供的所有帮助。到目前为止,从我对 Meteor 的有限接触中收集到的信息来看,它是一个很棒的平台,我肯定会坚持使用它,但是你真的必须跟上更新,因为版本之间的事情经常中断,因为方法是变了。换句话说,如果你是像我这样的新手,使用最新版本,除非你准备好进行相当多的调试和深入研究文档,否则不要费心尝试遵循任何超过一年的 Meteor 教程看看为什么旧代码不再有效。但话又说回来,这样做最终会给你一个更广泛的知识基础,这是我们都在努力的:)
最佳答案
我将带您逐步了解 overlayscrollbars
的工作原理,以便我们了解将其包含在您的应用中的正确方法。
我首先查看来源的 package.json
file ,特别是指向 js/OverlayScrollbars.js
main:
键
我看js/OverlayScrollbars.js
查看它是否导出模块。你可以在lines 14-21上看到它使用 UMD 模式来指定它的导出。
因为 Meteor 使用 CommonJS 进行模块管理,module.exports
对象是您从 'overlayscrollbars' 导入内容时得到的对象;
我还注意到底部的 line 6039它会将 OverlayScrollbars
置于全局范围内,即使它在模块环境中也是如此。
如果检测到 jQuery,它还会在 lines 6042-6058 上注册为 jQuery 插件。
现在我们知道我们可以根据需要导入它,但它也应该在全局范围内可用。
下一个关键是确保模块运行,以便它真正在全局范围内结束。我对此的偏好是在每个依赖它的文件中使用导入语法,这样当您最终更改该文件或单独测试它时,它会带来所有依赖项。
<那么我该如何导入呢?
你完全正确 import overlayScrollbars from 'overlayscrollbars';
所以现在的问题是为什么它不起作用?
我用 meteor create test
开始了一个快速的新项目,并用 meteor npm install overlayscrollbars --save
添加了包,并添加了 import overlayScrollbars from 'overlayscrollbars' ;
到 /client/main.js
。
overlayScrollbars
在该文件中可用。OverlayScrollbars
在窗口/全局范围内overlayScrollbars
是 jQuery 对象上的一个方法所以问题一定是别的原因。你看到了什么错误?你把导入语句放在哪里了?
查看您的调用代码:
您不需要自动运行,因为您没有调用任何反应性数据源。 (如果你这样做会导致不需要的整个应用程序重新呈现)
我会将滚动条代码移动到呈现 .main-content
的组件的 componentDidMount
Hook 中。这样,当代码运行时,保证元素存在。
无需将其包装在 $(function(){...})
block 中。 document.ready 事件与 React 应用无关
最后一次修改
对于没有 UMD 模式的 jQuery 插件,通常直接 import 'plugin-name';
就可以了。
如果这不起作用(通常是因为 UMD 部分损坏),在 Meteor 中,您可以将文件复制到 client/compatibility/
文件夹中,它们将在没有任何模块包装的情况下加载,作为最后的手段,将他们的变量暴露给全局范围。这相当于直接添加一个脚本标签
关于javascript - 在 Meteor v1.7.0.3 中添加和使用 jQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51052600/
在带有 jQuery 的 CoffeeScript 中,以下语句有什么区别吗? jQuery ($) -> jQuery -> $ - > 最佳答案 第一个与其他两个不同,就像在纯 JavaScr
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭13 年前。 Improve th
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
这个问题可能听起来很愚蠢,但请耐心等待,因为我完全是初学者。我下载了两个 jQuery 版本,开发版本和生产版本。我想知道作为学习 jQuery 的初学者,什么更适合我。 最佳答案 如果您对 jQue
The documentation说要使用 1.6.4,但我们现在已经升级到 1.7.2。 我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗? 最佳答案 您当然可以,但如果您想
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。 我只需要弹出和内联内容。你的回复有很大帮助。
很明显我正在尝试做一些 jQuery 不喜欢的事情。 我正在使用 javascript 上传图片。每次上传图片时,我都希望它可见,并附加一个有效的删除脚本。显示工作正常,删除则不然,因为当我用 fir
这两个哪个是正确的? jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
我知道这个问题已经被问过几次了,但想知道您是否可以帮助我解决这个问题。 背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好,然后我想在表单上得到验证。我可以使用
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。 我正在使用此功能。当验证查找这些规则时,它会对元素进
我更喜欢为我一直在开发的网络社区添加实用的视觉效果,但随着事情开始堆积,我担心加载时间。 拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery? 是否使用 jQuery
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。 你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
我如何找出最适合某种情况的方法?任何人都可以提供一些示例来了解功能和性能方面的差异吗? 最佳答案 XMLHttpRequest 是原始浏览器对象,jQuery 将其包装成一种更有用和简化的形式以及跨浏
运行时 php bin/console oro:assets:build ,我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是,使用 grep 似乎不起作用。 在哪里? 谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
我的页面上有多个图像。为了检测损坏的图像,我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦,尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名?这是第一个问题。 其
我是一名优秀的程序员,十分优秀!