在 Meteor 中使用 jQuery 插件

Question

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

示例是我有一个插件，它允许我将一堆名为jQuery Shuffle 的 div 打乱，但是当我在头部或从外部文件中调用以下脚本时，它不会执行。可能是插件没有发布功能，但它是客户端，所以没有意义。我已经验证了 javascript 和 jQuery 正在通过一些 console.log() 命令测试工作，并且这些测试似乎可以在外部文件或头部工作，无论它们是否包含在 jQuery 函数中。这是我尝试与 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/javascript" src="directory/somescript.js"></script> 正常调用插件并通过/client 目录加载脚本来加载插件的JS 文件，以处理要发送到客户端的文件。它会自动将这些文件加载​​到<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

我在使用 jquery 插件时遇到了这个问题。 我的 html 代码是：

<head>
  <meta charset="utf-8">
  <!-- Plugin JQuery -->
  <script src="js/jquery.easing.min.js"></script>
</head>
<body>
 {{main}}
</body>

然后我把脚本放在 {{main}} 模板之后，它就可以工作了。在所有 javascript meteor 包之后加载脚本：

<head>
  <meta charset="utf-8">
</head>
<body>
 {{main}}
 <!-- Plugin JQuery -->
  <script src="js/jquery.easing.min.js"></script>
</body>

Answer 2

最安全的方法是将插件作为一个包交付并在 template.rendered 中对其进行初始化

Answer 3

在流星上使用查询之类的插件可能有点棘手，例如您正在使用

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

没关系，但我更喜欢使用

Meteor.startup(function () {

});

参考这里Stack Question about onReady and Startup

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

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

如果您在某个 github 存储库中有您的网络/项目，或者在 nitrous.io 等云主机服务中工作，我可以帮助您