using jquery plugin in backbone with requirejs

问题:

I'm trying to use this plugin: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin in a backbone application with requirejs, and I think I must not quite be understanding how requirej and backbone interact. I've read various things, so I want to make sure I get this working using the project structure I've set up, which I believe is fairly common. Here's my app:

I load requirejs and pass in the main js file:

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

In main.js I load in all the paths for backbone:

    require.config({
      paths: {
        jquery: '../bower_components/jquery/dist/jquery.min',
        underscore: '../bower_components/underscore/underscore',
        backbone: '../bower_components/backbone/backbone',
        touchswipe: '../bower_components/jquery-touchswipe/jquery.touchSwipe.min',
        templates: 'templates'
      }
    });

    require([
      'app',
    ], function(App){
      App.initialize();
    });

In app.js, I just initialize my router, and in router.js, I initialize my views:

    app_router.on('route:defaultAction', function (actions) {
            var homeView = new HomeView();
            homeView.render();
        });

In my view, I need to be able to figure out how to use the plugin. I can tell the source has loaded, but I can't call events as documented. 

Here's a sample view:

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
  });

},

Note my comments for the imagesloaded plugin, which I got to work (though I think through a weird way).

Can anybody clear things up? Using these plugins seems so easy in standard javascript, but backbone is really throwing me off.

回答1:

Things seems to work fine :

http://jsfiddle.net/nitincool4urchat/zzhpmhcd/1/

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();
});

I prefer to call plugins only when they're required as shown in the above code. It works fine, even if we load them early.

http://jsfiddle.net/nitincool4urchat/zzhpmhcd/2/

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();
});