[英]Creating a custom widget in Dojo, error calling functions within the new widget?
The issue is i am following the tutorial here and the functionality of the new widget work fine until i hover over the widget where a this._changeBackground method is being called from "on" listeners, i get the error TypeError: this._changeBackground is not a function
问题是我在这里遵循教程并且新小部件的功能正常工作,直到我将鼠标悬停在从“on”侦听器调用this._changeBackground方法的小部件上,我得到错误
TypeError: this._changeBackground is not a function
The final code as implemented from tutorial looks like this: 从教程实现的最终代码如下所示:
define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!/JS/Allatus/Test.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang","dojo/on"],
function(declare, WidgetBase, TemplatedMixin, template, domStyle, baseFx, lang , on){
return declare([WidgetBase, TemplatedMixin], {
// Some default values for our author
// These typically map to whatever you're handing into the constructor
name: "No Name",
// Using require.toUrl, we can get a path to our AuthorWidget's space
// and we want to have a default avatar, just in case
avatar: require.toUrl("JS/Allatus/custom/android_vector.jpg"),
bio: "",
// Our template - important!
templateString: template,
// A class to be applied to the root node in our template
baseClass: "authorWidget",
// A reference to our background animation
mouseAnim: null,
// Colors for our background animation
baseBackgroundColor: "#fff",
mouseBackgroundColor: "#def",
postCreate: function(){
// Get a DOM node reference for the root of our widget
var domNode = this.domNode;
// Run any parent postCreate processes - can be done at any point
this.inherited(arguments);
// Set our DOM node's background color to white -
// smoothes out the mouseenter/leave event animations
domStyle.set(domNode, "backgroundColor", this.baseBackgroundColor);
// Set up our mouseenter/leave events - using dojo/on
// means that our callback will execute with `this` set to our widget
on(domNode, "mouseenter", function (e) {
this._changeBackground(this.mouseBackgroundColor);
});
on(domNode, "mouseleave", function (e) {
this._changeBackground(this.baseBackgroundColor);
});
},
_changeBackground: function(toCol) {
// If we have an animation, stop it
if (this.mouseAnim) { this.mouseAnim.stop(); }
// Set up the new animation
this.mouseAnim = baseFx.animateProperty({
node: this.domNode,
properties: {
backgroundColor: toCol
},
onEnd: lang.hitch(this, function() {
// Clean up our mouseAnim property
this.mouseAnim = null;
})
}).play();
},
_setAvatarAttr: function(av) {
// We only want to set it if it's a non-empty string
if (av != "") {
// Save it on our widget instance - note that
// we're using _set, to support anyone using
// our widget's Watch functionality, to watch values change
this._set("avatar", av);
// Using our avatarNode attach point, set its src value
this.avatarNode.src = av;
}
}
});
});
Any Ideas Why I cant call another function within my customize widget ? 任何想法为什么我不能在我的自定义小部件中调用另一个函数? is that just a bug or i am doing something wrong?
这只是一个错误或我做错了什么?
Your mouseEnter function is being called outside the scope of your widget (scope in JS refers to the value of the "this" variable). 您的mouseEnter函数在窗口小部件范围之外被调用(JS中的范围指的是“this”变量的值)。 This is a common problem and dojo has a simple solution, the function lang.hitch can be used to tie a function to a certain scope.
这是一个常见问题,dojo有一个简单的解决方案,函数lang.hitch可用于将函数绑定到某个范围。 (and more, I would recommending reading the docs on it).
(还有更多,我建议阅读上面的文档)。 Here's how you should use it in this scenario :
以下是在这种情况下应该如何使用它:
// Set up our mouseenter/leave events - using dojo/on
// means that our callback will execute with `this` set to our widget
on(domNode, "mouseenter", lang.hitch(this, function (e) {
this._changeBackground(this.mouseBackgroundColor);
}));
on(domNode, "mouseleave", lang.hitch(this, function (e) {
this._changeBackground(this.baseBackgroundColor);
}));
The scope of this
by default in on
callbacks is window. 范围
this
默认情况下, on
回调的窗口。 Since you want the scope to be the widget itself, you need to import dojo/_base/lang
and use the lang#hitch
function to explicitly set the scope of the callback 由于您希望范围是窗口小部件本身,因此需要导入
dojo/_base/lang
并使用lang#hitch
dojo/_base/lang
函数显式设置回调范围
on(domNode, "mouseenter", lang.hitch(this,function (e) {
this._changeBackground(this.mouseBackgroundColor);
}));
on(domNode, "mouseleave", lang.hitch(this,function (e) {
this._changeBackground(this.baseBackgroundColor);
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.