使用requirejs在主干网中使用jquery插件
using jquery plugin in backbone with requirejs
我正在尝试使用这个插件:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin在使用requirej的主干应用程序中,我想我一定不太了解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
});
},
请注意我对imageslooaded插件的评论,我开始工作了(尽管我思考的方式很奇怪)。
有人能把事情弄清楚吗?在标准javascript中使用这些插件似乎很容易,但主干网确实让我很失望。
一切似乎都很好:
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();
});
相关文章:
- 如何在Angular2中使用jQuery插件
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 扩展jQuery插件以更改配置
- "工具提示"jQuery插件坏了
- 不能在图像中的地图标记中使用花式框jquery插件的区域标记
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 合并TinyMCE(jQuery插件)文件
- 带有jquery插件的backbone.js视图
- 自制jQuery插件已触发,但无法工作
- 我如何才能找到哪些网站使用我的jQuery插件
- jquery插件或javascript方法自动调整文本输入(而非文本区域)(固定宽度)可变高度的大小
- 在多个元素上使用jquery插件,只需稍作修改
- HtmlBox(jquery插件)在ajax调用中不起作用
- 构造jQuery插件
- 使用filedownload jquery插件处理FilePathResult返回值