Javascript 在主干网中使用jquery插件和requirejs

我正在尝试使用这个插件：在带有requirejs的主干应用程序中，我想我一定不太了解requirej和主干是如何交互的。我读过各种各样的东西，所以我想确保使用我设置的项目结构来实现这一点，我相信这是相当普遍的。这是我的应用程序：

我加载requirejs并传入主js文件：

<script src="/assets/js/bower_components/requirejs/require.js" data-main="/assets/js/app/main"></script>

以下是一个示例视图：

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/products/productsItemsTemplate.html',
  'collections/products/ProductsItemsCollection',
  'imagesloaded',
  'touchswipe'

], function($, _, Backbone,productsItemsTemplate,ProductsItemsCollection,imagesloaded,touchswipe){
imageLoader: imagesLoaded, //this plugin worked by defining it again here, but this feels like the wrong way to do things, and also, it didn't rely on a dom object in order to work, which i feel might be a problem with touchSwipe

touchSwipe: touchswipe,

el: $(".products-items-container"),

events : {

},

initialize: function(){
  $(".product-items-container").swipe( { //doesn't seem to work, but doesn't throw errors either
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
      console.log(direction);
    },
     threshold:0
  });

},

请注意我对imagesloaded插件的评论，这是我开始工作的地方（尽管我用一种奇怪的方式思考）

---

有人能把事情弄清楚吗？在标准javascript中，使用这些插件似乎很容易，但主干网确实让我感到厌烦。

事情似乎很顺利：

我更喜欢只在需要插件时调用插件，如上面的代码所示。即使我们提前加载，它也可以正常工作

---

当您附加滑动手柄时，请确保元素在DOM中。哇，这很有效。我不太确定我做错了什么，但如果你碰巧检查了这一点，你能解释一下为什么需要“swipe”，但不需要连同jquery、下划线和主干一起传递到function（）参数吗？jquery、下划线和主干是AMD兼容的，因此它们导出一个变量，而swipe是一个jquery插件，我不知道它是否出口什么-

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/products/productsItemsTemplate.html',
  'collections/products/ProductsItemsCollection',
  'imagesloaded',
  'touchswipe'

], function($, _, Backbone,productsItemsTemplate,ProductsItemsCollection,imagesloaded,touchswipe){
imageLoader: imagesLoaded, //this plugin worked by defining it again here, but this feels like the wrong way to do things, and also, it didn't rely on a dom object in order to work, which i feel might be a problem with touchSwipe

touchSwipe: touchswipe,

el: $(".products-items-container"),

events : {

},

initialize: function(){
  $(".product-items-container").swipe( { //doesn't seem to work, but doesn't throw errors either
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
      console.log(direction);
    },
     threshold:0
  });

},

require.config({
    paths: {
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min",
            "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min",
            "backbone": "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min",
            "text": "https://rawgit.com/requirejs/text/master/text"
    }
});

require(["jquery", "underscore", "backbone"], function ($, _, Backbone) {
    var view = Backbone.View.extend({
        initialize: function () {
            require(["//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"], function () {
                $("#test").swipe({
                    //Generic swipe handler for all directions
                    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                        $(this).text("You swiped " + direction);
                    },
                    //Default is 75px, set to 0 for demo so any distance triggers swipe
                    threshold: 0
                });
            });
        }
    });
    new view();
});

require.config({
    paths: {
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min",
            "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min",
            "backbone": "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min",
            "text": "https://rawgit.com/requirejs/text/master/text",
            "swipe": "//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min"
    }
});

require(["jquery", "underscore", "backbone", "swipe"], function ($, _, Backbone) {
    var view = Backbone.View.extend({
        initialize: function () {
            $("#test").swipe({
                //Generic swipe handler for all directions
                swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                    $(this).text("You swiped " + direction);
                },
                //Default is 75px, set to 0 for demo so any distance triggers swipe
                threshold: 0
            });
        }
    });
    new view();
});