Portée dans un objet littéral

Question

Je vais commencer par un exemple extrait:

self.addwidget({ 
    box: ns.box({       
       text:  'Foobar', 
       fromTop: ~~(Math.random()*window.innerHeight), 
       fromLeft: ~~(Math.random()*window.innerWidth), 
       toTop:  240, 
       toLeft:  40, 
       css:  'foobar', 
       easing:  'easeOutCirc', 
       duration: 2000, 
       events:  { 
        mousedown:  function(e){ 
         e.target.position = {x: e.pageX, y: e.pageY}; 
        }, 
        mouseup:  function(e){ 
         // "this" should reference be "box"          
        } 
       } 
    }), 
    delay: 3000 
}); 

Description succincte:
ns.box() prend un objet comme argument et crée une nouvelle jQuery object. Il utilise jQuery.extend() pour fusionner l'objet de propriété events avec le jQuery constructor $('<elem/>', {});
Après cela, ns.box() renvoie un nouvel objet qui contient certaines méthodes.
-

Ce que je veux archieve est d'avoir accès à ceux propertys/methods dans le event handlers. Bien sûr, je ne peux pas accéder à box.somemethod à ce stade parce que je ne peux pas référencer la propriété box externe à ce stade. J'ai donc essayé de changer la portée des gestionnaires d'événements avec jQuery.proxy(), à this, mais sans succès.
this.somemethod est non référencé, même si mandaté. J'ai également essayé de remplacer tous les objets par le haut -> vers le bas, sans succès non plus.

Est-il même possible dans une construction comme celle-ci, d'accéder aux propriétés à partir de l'objet retourné de ns.box(), dans les gestionnaires d'événements?

Answer 1

Vous pouvez y parvenir avec une fonction de détermination de la portée, comme ceci:

self.addwidget((function() { 
    var box = ns.box({       
       text:  'Foobar', 
       fromTop: ~~(Math.random()*window.innerHeight), 
       fromLeft: ~~(Math.random()*window.innerWidth), 
       toTop:  240, 
       toLeft:  40, 
       css:  'foobar', 
       easing:  'easeOutCirc', 
       duration: 2000, 
       events:  { 
        mousedown:  function(e){ 
         e.target.position = {x: e.pageX, y: e.pageY}; 
        }, 
        mouseup:  function(e){ 
         // You can access `box` here       
        } 
       } 
    }); 

    return { 
     box: box, 
     delay: 3000 
    }; 
})()); 

En attribuant la boîte à une var dans notre fonction de cadrage, nous créons un symbole que les gestionnaires d'événements (qui sont closures) ferment plus et ont donc accès à. Nous appelons la fonction immédiatement, l'obligeant à retourner l'objet. Les références tenues par les fermetures sont durables, et donc ...

J'utilise ce modèle tout le temps parce que je n'aime pas avoir des fonctions anonymes (vos gestionnaires d'événements sont anonymes, par exemple); more here. Si je faisais ce qui précède, je ferais ceux qui sont nommés à la place, comme ceci:

self.addwidget((function() { 
    var box = ns.box({       
       text:  'Foobar', 
       fromTop: ~~(Math.random()*window.innerHeight), 
       fromLeft: ~~(Math.random()*window.innerWidth), 
       toTop:  240, 
       toLeft:  40, 
       css:  'foobar', 
       easing:  'easeOutCirc', 
       duration: 2000, 
       events:  { 
        mousedown:  boxMousedown, 
        mouseup:  boxMouseup 
       } 
    }); 

    function boxMousedown(e){ 
     e.target.position = {x: e.pageX, y: e.pageY}; 
    } 

    function boxMouseup(e){ 
     // You can access `box` here       
    } 

    return { 
     box: box, 
     delay: 3000 
    }; 
})()); 

Ces fonctions ont maintenant des noms qui peuvent apparaître dans les piles d'appels et des messages d'erreur, mais ils sont complètement privé, pas encombrer l'espace de noms global.