在Meteor中使用jQuery插件 [英] Using jQuery plugins in Meteor
问题描述
我一直在尝试向Meteor添加一个jQuery插件，但Meteor拒绝让插件在客户端工作。
I have been trying to add a jQuery plugin to Meteor but Meteor refuses to let the plugin work client side.
示例是我有这个插件允许我调整一堆名为 jQuery Shuffle 的div，但当我在头部或从头部调用以下脚本时它不执行的外部文件。它可能是插件不发布功能，但它是客户端，所以没有意义。我已经验证了javascript和jQuery正在通过一些 console.log（）命令测试，这些似乎可以在外部文件中工作，或者在头部中它们被包含在jQuery函数与否。这是我试图用jQuery Shuffle的代码：
The example is I have this plugin that allows me to shuffle a bunch of divs around called jQuery Shuffle but when I call the following script in the head or from an external file it does not execute. It could be the plugin not publishing functions but it is client side so that makes no sense. I have verified that javascript and jQuery is working through a few console.log() command tests and those seem to work in external files or in the head wether they are inclosed in a jQuery function or not. Here is the code I am trying to use with jQuery Shuffle:
（注意这个脚本也使用了一些其他似乎无法正常工作的插件）
$(document).ready(function () {
var hash = window.location.hash.substr(1);
// Puts hash into search field
if (hash !== "") {
$("#search").val(hash);
$("#search").focus();
$('#search').keyup();
}
/* initialize shuffle plugin */
var $grid = $('#grid');
var $gridn = $('#gridn');
$grid.shuffle({
itemSelector: '.item',
group: 'alll'
});
$gridn.shuffle({
itemSelector: '.item',
group: 'news'
});
/* detects a news post */
if (hash.indexOf("news") > -1) {
$('#alll').removeClass('active');
$('#news').addClass('active');
$('#n-news').addClass('active');
$grid.shuffle('shuffle', 'news');
}
/* reshuffle when user clicks a filter item */
$('#filter a').click(function (e) {
e.preventDefault();
window.scrollTo(0, 0);
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName);
$gridn.shuffle('shuffle', groupName);
var n_catagories = ["n-v", "n-am", "n-av", "n-gd", "n-d", "comic", "blog"];
n_catagories.forEach(function (n_selectedcat) {
if ($("#" + n_selectedcat).hasClass("active")) {
$('#news').addClass('active');
//console.log(n_selectedcat)
}
});
});
// Sorting options
$('.select-options').on('change', function () {
var sort = this.value,
opts = {};
// We're given the element wrapped in jQuery
if (sort === 'date-created') {
opts = {
reverse: true,
by: function ($el) {
return $el.data('date-created');
}
};
} else if (sort === 'title') {
opts = {
by: function ($el) {
return $el.data('title').toLowerCase();
}
};
}
// Filter elements
$grid.shuffle('sort', opts);
});
// Advanced filtering
$('.search').on('keyup change', function () {
var val = this.value.toLowerCase();
window.scrollTo(0, 0);
$grid.shuffle('shuffle', function ($el, shuffle) {
// Only search elements in the current group
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
return false;
}
var text = $.trim($el.find('.item-tags').text()).toLowerCase() + $.trim($el.find('.hidden').text()).toLowerCase();
return text.indexOf(val) !== -1;
});
$gridn.shuffle('shuffle', function ($el, shuffle) {
// Only search elements in the current group
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
return false;
}
var text = $.trim($el.find('.item-tags').text()).toLowerCase() + $.trim($el.find('.hidden').text()).toLowerCase();
return text.indexOf(val) !== -1;
});
});
//REMOVE AND HIDE HANDELER
var $nnitems = $('.nnotice');
$(".nnotice-button").click(function () {
Cookies.set('hidennotice', 'true', {
expires: 31557600
});
});
if (Cookies.get('hidennotice') == 'true') {
$grid.shuffle('remove', $nnitems);
}
$(".nnotice").click(function () {
$grid.shuffle('remove', $nnitems);
});
//Auto Shuffle
$(".social-toggle").click(function () {
$(".social-stuffs").slideToggle("slow");
setTimeout(function () {
var catagories = ["alll", "v", "am", "av", "gd", "d", "news", "n-v", "n-am", "n-av", "n-gd", "n-d", "comic", "blog"];
catagories.forEach(function (selectedcat) {
if ($("#" + selectedcat).hasClass("active")) {
$grid.shuffle('shuffle', selectedcat);
}
});
}, 1000);
});
});
如果未包含在Meteor中，此脚本将按预期工作。
我已经尝试通过< script type =text / javascriptsrc =directory / somescript正常调用它们来加载插件的JS文件.js>< / script> 并通过meteor使用的 / client 目录加载脚本来处理前往客户。当放在这里时，它会自动将这些文件加载到< script> 中。即使Meteor加载它们似乎也无法工作。我不知道是不是因为插件中的函数需要发布，或者是不可能在Meteor中使用这些插件/ apis。
I have tried loading the JS files for the plugins by calling them normally through <script type="text/javascript" src="directory/somescript.js"></script> and by loading the scripts through the /client directory meteor uses to process files that are going to the client. It automatically loads these files in a <script> when put here. Even with Meteor loading them it seems not to work. I don't know if it is because the functions inside the plugins need to be published or if it is just no possible to use these kinds of plugins/apis with Meteor.
这是一个没有Meteor 的网站的工作未完成版本（并且缺少文件和未完成的配色方案）
修改：
基本上我只是需要能够以某种方式加载jQuery插件，然后加载脚本来控制它。这就是我在做的事情。
Basically I just need to be able to load a jQuery plugin somehow and then load the script to control it. That is what I am having trouble doing.
推荐答案
使用像查询这样的插件在流星上可能有点棘手，例如你正在使用
Using plugins like query could be a little tricky on meteor, example you are using
$(document).ready(function () {});
还可以，但我更喜欢
Meteor.startup(function () {
});
还有一些人喜欢使用 Template.myTemplate.rendered）function（）{}
及其作品（在我的案例中有效），并尝试使用一些超时
Also some people prefer to use the Template.myTemplate.rendered ) function(){}
and its works (on my case works), and also try to use some Timeouts
你没有在控制台上得到任何错误，因为没有错误发生所有DOM元素的创建，我使用Carrousels，来自codrops等的动态列表多次面对这个问题。
You are not getting anything errors on the console, because nothings wrong happens all DOM elements were created, i face this problems many times using Carrousels, dynamic list from codrops etc.
如果您的网站/项目在某些github仓库或在某些云主机服务中工作，如nitrous.io，我可以帮助您
If you have your web/project on some github repo or working in some cloud host Service like nitrous.io i could help you
这篇关于在Meteor中使用jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
