javascript - 在 Meteor 中使用 jQuery 插件

Question

我一直在尝试向 Meteor 添加一个 jQuery 插件，但 Meteor 拒绝让该插件在客户端工作。

这个例子是我有这个插件，它允许我随机播放一堆名为 jQuery Shuffle 的 div。但是当我在头部或外部文件中调用以下脚本时，它不会执行。它可能是插件不发布功能，但它是客户端，所以没有意义。我已经验证了 javascript 和 jQuery 正在通过一些 console.log() 工作命令测试和那些似乎在外部文件或头部工作，无论它们是否包含在 jQuery 函数中。这是我尝试与 jQuery Shuffle 一起使用的代码:

(do take note that this script also is using a few other plugins that appear not to be working either)

$(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/javascript" src="directory/somescript.js"></script> 正常调用来加载插件的 JS 文件。并通过 /client 加载脚本目录 meteor 用于处理要发送给客户端的文件。它会自动将这些文件加载​​到 <script> 中放在这里的时候。即使使用 Meteor 加载它们，它似乎也不起作用。我不知道是因为插件中的函数需要发布，还是因为 Meteor 无法使用这些插件/api。

This is a working, unfinished version of the site without Meteor (and that has missing files and an unfinished color scheme)

编辑:

基本上，我只需要能够以某种方式加载 jQuery 插件，然后加载脚本来控制它。这就是我遇到的麻烦。

Answer 1

在 meteor 上使用像查询这样的插件可能有点棘手，例如你正在使用

$(document).ready(function () {});

没关系，但我更喜欢一起工作

Meteor.startup(function () {

});

此处引用Stack Question about onReady and Startup

还有一些人更喜欢使用 Template.myTemplate.rendered ) function(){} 及其工作(在我的案例中工作)，并尝试使用一些超时

您在控制台上没有收到任何错误，因为所有 DOM 元素都已创建，没有发生任何错误，我使用 Carrousels、codrops 的动态列表等多次遇到这个问题。

如果您的网站/项目在某个 github 存储库上或在某些云主机服务(如 nitrous.io)中工作，我可以帮助您