Quelle est l'approche OO pour accéder à des méthodes de plugin jQuery de mon plugin HTML?

Question

J'ai commencé avec cette question: multiples gadgets Javascript par page . Après avoir lu sur la façon de construire un plugin jQuery J'ai modifié mon OO objet JavaScript dans un plugin jQuery en enveloppant mon objet JS dans

(function {} { /*my object code*/ }(jQuery))

et en ajoutant un

function createMyGadget() { return new myObject }

dans mon objet. Je peux maintenant afficher avec succès deux gadgets sur une page en procédant comme suit:

<div id="foo"></div>
<div id="bar"></div>

<script language="JavaScript">
    $("#foo").createMyGadget({ title: "My First Gadget"});
    $("#bar").createMyGadget({ title: "My Second Gadget"});
</script>

Dans le cadre de la fonction createMyGadget(), je crée une nouvelle div avec un identifiant unique (gadgetUID), écrire un tas de HTML, des boutons, imgs, etc. à cette div, puis ajouter que div à #foo et #bar. Cela fonctionne bien.

Dans mon HTML, j'ai un bouton « Next » qui doit appeler la fonction goNext() qui est définie dans l'objet JavaScript. Comment puis-je référencer cette fonction dans cet objet? J'ai essayé

onClick='$("#foo").goNext()'

et

onClick='$("#gadgetUID").goNext()'

et toutes les autres permutations que je pouvais penser. Firebug répond toujours avec un message d'erreur « ... pas une fonction ».

ADDENDA: Voici ma réponse à johnnyheadphones:

J'ai essayé de faire la même chose à l'intérieur de jQuery avec les mêmes résultats, par exemple «... n'est pas une fonction. Voici l'appel de fonction réelle:

displayGadget : function() {

    var myString = "\
    <div id=\""+this.gadgetId+"\" >\
        <div id=\"gadget_header\">\
            <h1 id=\"title\">"+this.options.title+"</h1>\
        </div>\
        <div id='loading' style=''><img src='images/loading2.gif' /></div> \
        <div id=\"gadget_body\"></div>\
        <div id=\"gadget_footer\">\
            <div id=\"searchAsset\">\
            </div>\
            <div id=\"pageControls\">\
                <img id=\"goPreviousIcon\" src=\"images/go-previous.png\">\
                <img id=\"goNextIcon\"  src=\"images/go-next.png\">\
                <input type=\"button\" value=\"Next\" />\
            </div>\
        </div> \
    \
    </div>\
    <div id=\"debugInfo\"></div>\
            <script type=\"text/javascript\"> \
            </script>\
    ";

    $("#"+this.gadgetContainerID).html(myString);

    $('input[value="Next"]','#'+this.gadgetContainerID).click(function() {
        $('#'+this.gadgetId).pageData(1);
    });
}

Quand je recharge et cliquez sur le bouton suivant, Firebug dit '$ (' # '+ this.gadgetId) .pageData (1) n'est pas une fonction'.

BTW, je voulais d'abord faire avec le goNextIcon, mais il a changé à un bouton que je puisse copier / coller votre code.

Je commence à penser que j'ai quelque chose ne va pas et c'est juste un étrange sous-produit.

ADDENDA: Je compris le problème: je suis un idiot (mais l'un de mes xGFs pu vous dire que).

J'ai appelé la PageData () sur l'élément en question. Il n'y a pas de fonction PageData () sur l'élément; il est sur le « ce » objet. Onc je l'ai signalé à la correcte (et unique) PageData objet () (qui est fixé à « ce »), il a travaillé comme annoncé.

Maintenant, pour aller faire un nettoyage de code.

Answer 1

si vous écrivez le gestionnaire onclick dans le cadre du code HTML qui est ajouté au DOM, essayer quelque chose comme ceci:

<input type="button" value="Next" onclick="function() { $('#gadgetUID').goNext(); }" />

Ou, vous pouvez utiliser jQuery pour lier le gestionnaire à l'intérieur du code de plug-in. Sans voir un exemple de code, il est difficile de dire exactement ce dont vous avez besoin. Mais ceci est l'idée générale:

$('input[value="Next"]','#foo').click(function() {
    $('#gadgetUID').goNext();
});

EDIT: On dirait que c'est un problème de cadrage. Appel PageData () dans la portée correcte devrait résoudre votre problème. Peut-être quelque chose comme ça fonctionnerait:

displayGadget : function() {
    // encapsulate this in a closure, so pageData() is called on the instance
    // of the object, not the DOM element selected by jQuery
    var that = this;

    [... string stuff here. you should replace 'this' with 'that' here as well ...]

    $("#"+that.gadgetContainerID).html(myString);

    $('#goNextIcon','#'+that.gadgetContainerID).click(function() {
        that.pageData(1);
    });
},

// the above code assumes that pageData() is part of the same
// object instance as displayGadget. if not, then you'll have to
// tweak your code to point call pageData in the correct scope
pageData: function( page ) {
    // do stuff here!
}

Notez que j'ai changé le sélecteur jQuery retour en fonction de votre code d'origine (les balises d'image).

Si vous prévoyez d'avoir plusieurs instances de ce code HTML sur une page, une chose que vous voudrez peut-être à considérer est l'utilisation des classes au lieu d'ID pour les éléments DOM générés. Donner le même ID à plus d'un élément DOM est généralement une mauvaise chose et peut vous causer des maux de tête et des bugs plus bas sur la route.

, vous pouvez également regarder dans la création de nœuds DOM au lieu d'utiliser innerHTML pour générer les commandes. Il serait plus facile de garder les références aux éléments et gestionnaires d'événements de crochet sur eux.

Answer 2

est peut-être ce que vous pensez ...

onClick = function() {
    $("#gadgetUID").goNext();
}

Cela crée une référence à une fonction anonyme qui trouve votre objet JQuery (s) et exécute la fonction que vous souhaitez exécuter.