с использованием jquery plugin в магистрали с requirejs

Question

Я пытаюсь использовать этот плагин: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin в базовом приложении с requirejs, и я думаю, что я не должен понимать, как взаимодействовать requirej и позвоночник. Я читал разные вещи, поэтому я хочу убедиться, что я работаю, используя структуру проекта, которую я создал, что, по моему мнению, довольно распространено. Вот мое приложение:

загружает requirejs и передать в главном Js файл:

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

В main.js я загружаю во всех трактах для позвоночника:

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. 

Вот посмотреть пример :

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 плагин, который я получил на работу (хотя я думаю, что через плотину d way).

Может кто-нибудь прояснить ситуацию? Использование этих плагинов кажется таким простым в стандартном javascript, но позвоночник действительно отбрасывает меня.

Answer 1

вещей, кажется, работает хорошо:

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

Я предпочитаю называть плагины только тогда, когда они необходимы, как показано в приведенном выше коде. Он отлично работает, даже если мы загружаем их на ранней стадии.

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