我试图让一些jQuery在离线页面上工作.该网站的应用程序使用EmberJS,RequireJS,谁知道还有什么,但最重要的是我试图用普通的jQuery替换这个神秘的代码.
以下是一些应该响应交互的HTML:
所以这只是一个展示/隐藏互动.
该应用程序的代码是
define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {
function RevealContent($el) {
this.el = $el;
this.interactionData = $el.find(".interaction_data");
this.container = $el.find(".interaction_content");
}
RevealContent.prototype = {
init: function init() {
var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());
this.container = this.container.parent().find('.RevealContent');
this.container.append(initialContent);
this.container.append(contentToReveal.hide());
initialContent.click(function () {
(0, _jquery["default"])(contentToReveal).slideToggle('slow');
});
// prevent any links within initialContent from navigating anywhere
initialContent.find('a').click(function (e) {
e.preventDefault();
});
}
};
Run Code Online (Sandbox Code Playgroud)
我已经开始尝试用普通的jQuery替换上面的内容,但很难解码上面的一些代码,例如(0,_jquery ["default"])
有谁知道我如何将上面的转换为普通的jQuery,这样就没有外部依赖,没有与应用程序进行必要的通信?
这是一个带有一些HTML和原始代码的jfiddle.
https://jsfiddle.net/0s6xdk9q/1/
这是我到目前为止所做的重写:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
//console.log('made it here');
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = $('<div />', this.container).append($(interactionData.find('tdd')[1]).detach());
var initialContent = $('<div class="pointer" />', this.container).append($(interactionData.find('tdd')[0]).detach());
this.container = this.container.parent().find('.RevealContent');
this.container.append(initialContent);
this.container.append(contentToReveal.hide());
initialContent.click(function () {
$(contentToReveal).slideToggle('slow');
});
});
});
Run Code Online (Sandbox Code Playgroud)
注意我使用而不是因为Chrome正在剥离标签,因为他们没有父...我已经确认在我的本地页面中,interactionData和this.container返回的内容与页面的远程版本相同.
但那些contentToReveal和initialContent vars让我失望.我只是不理解这个原型业务的语法和使用,这样我就可以找出所需的其余jQuery代码.
有谁知道我需要做些什么来使这个工作?
万分感谢!布赖恩
这里的逗号是逗号运算符.它只是评估左侧的表达式,然后是右侧,返回右侧表达式的结果.
那么这个(0, ...)语法在这里做什么?那么它存在于从它的父对象中剥离函数,因此它不再是方法调用,基本上this是在方法的上下文中解除绑定.注意:
// ECMAScript 2015
var obj = {
foo() {
return this;
}
}
console.log(obj.foo() === obj);
console.log((0, obj.foo)() === obj);Run Code Online (Sandbox Code Playgroud)
这是Babel其他编译器用来确保将作为裸函数导入的函数作为函数调用而不是作为导入它们的模块上的方法的技巧.换一种说法,
(0, _jquery["default"])(...)
Run Code Online (Sandbox Code Playgroud)
相当于
$(...)
Run Code Online (Sandbox Code Playgroud)
$jQuery函数在哪里?
| 归档时间: |
|
| 查看次数: |
73 次 |
| 最近记录: |