在带有requirejs的主干中使用jquery插件 [英] using jquery plugin in backbone with requirejs
问题描述
我正在尝试使用此插件: https://github.com/mattbryson/TouchSwipe -Jquery-Plugin 在具有requirejs的骨干应用程序中,我想我一定不太了解requirej和骨干如何交互.我已经阅读了很多东西,所以我想确保可以使用我已经建立的项目结构来完成这项工作,我认为这是相当普遍的.这是我的应用程序:
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:
我加载requirejs并传入主要的js文件:
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>
在main.js中,我加载了主干的所有路径:
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.
以下是示例视图:
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插件的评论,尽管我认为这是一种奇怪的方法,但我还是可以使用它的.
Note my comments for the imagesloaded plugin, which I got to work (though I think through a weird way).
有人可以清理吗?在标准javascript中使用这些插件似乎非常容易,但是骨干真的让我失望.
Can anybody clear things up? Using these plugins seems so easy in standard javascript, but backbone is really throwing me off.
推荐答案
似乎一切正常:
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();
});
这篇关于在带有requirejs的主干中使用jquery插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!