0

問題は、ここのチュートリアルに従っていて、this._changeBackgroundメソッドが「オン」リスナーから呼び出されているウィジェットにカーソルを合わせるまで、新しいウィジェットの機能が正常に機能することです。エラーが発生します。TypeError: this._changeBackground is not a function

チュートリアルから実装された最終的なコードは次のようになります。

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

アイデアカスタマイズウィジェット内で別の関数を呼び出せないのはなぜですか？それは単なるバグですか、それとも私は何か間違ったことをしていますか？

4

2 に答える 2

1

mouseEnter関数がウィジェットのスコープ外で呼び出されています（JSのスコープは「this」変数の値を指します）。これは一般的な問題であり、dojoには簡単な解決策があります。関数lang.hitchを使用して、関数を特定のスコープに関連付けることができます。（さらに、そのドキュメントを読むことをお勧めします）。このシナリオでの使用方法は次のとおりです。

// 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);
}));
于 2013-02-07T13:28:53.540 に答える
1

this コールバックのデフォルトのスコープonはwindowです。スコープをウィジェット自体にしたいのでdojo/_base/lang、関数をインポートして使用しlang#hitch、コールバックのスコープを明示的に設定する必要があります

on(domNode, "mouseenter", lang.hitch(this,function (e) {
    this._changeBackground(this.mouseBackgroundColor);
}));
on(domNode, "mouseleave", lang.hitch(this,function (e) {
    this._changeBackground(this.baseBackgroundColor);
}));
于 2013-02-07T13:30:26.983 に答える