¿Cuál es el enfoque orientado a objetos puede acceder a métodos plugin de jQuery de mi conector HTML?

Question

Empecé con esta pregunta: múltiples aparatos de Javascript por página . Después de leer en la forma de construir un plugin de jQuery que he modificado mi OO objeto de JavaScript en un plugin de jQuery envolviendo mi objetivo en JS

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

y añadiendo a

function createMyGadget() { return new myObject }

en mi objeto. Ahora puedo mostrar con éxito dos aparatos en una sola página de la siguiente manera:

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

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

Como parte de la función createMyGadget(), creo un nuevo div con un identificador único (gadgetUID), escribir un montón de HTML, botones, IMG, etc, para que div, tiene que poner que div a #foo y #bar. Que funciona bien.

En mi HTML, tengo un botón "Siguiente", que tiene que llamar a la función goNext() que se define en el objeto de JavaScript. ¿Cómo me refiero que en función de ese objeto? He intentado

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

y

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

y todos los demás permutación de lo que podía pensar. Firebug siempre responde con un mensaje de error "... no es una función".

Adición: Aquí está mi respuesta a johnnyheadphones:

He estado tratando de hacer lo mismo desde el interior de jQuery con los mismos resultados, por ejemplo, '... no es una función'. Aquí está la llamada a la función:

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

Cuando vuelvo a cargar y haga clic en el botón siguiente, dice Firebug '$ (' # '+ this.gadgetId) .pageData (1) no es una función'.

Por cierto, en un principio quería hacer esto con la goNextIcon pero lo cambiaron a un botón para que pudiera copiar / pegar el código.

Me estoy empezando a pensar que tengo algo más equivocado y esto es sólo un extraño subproducto.

Adición: que me di cuenta del problema: que soy un idiota (pero ninguno de mis xGFs podía haber dicho eso).

Yo estaba llamando a la pageData () en el elemento en cuestión. No hay función de pageData () en el elemento; que está en el 'esto' objeto. Onc Señalé la correcta (y única) objeto pageData () (que está unido a 'esto'), funcionó como se anuncia.

Ahora, para ir a hacer algún código de limpieza.

Answer 1

Si usted está escribiendo el manejador onclick como parte del HTML que consigue anexa a la DOM, intentar algo como esto:

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

O, usted podría usar jQuery para enlazar el controlador de código dentro del plugin. Sin ver un ejemplo de código, es difícil decir exactamente lo que necesita. Pero esta es la idea general:

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

EDIT: Suena como este es un problema de alcance. Llamando pageData () en el alcance correcto debería arreglar el problema. Tal vez algo como esto funcionaría:

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!
}

Tenga en cuenta que he cambiado el selector de jQuery volver a coincidir con su código original (las etiquetas de imagen).

Si usted está planeando tener varias instancias de este código HTML en una página, una cosa es posible que desee considerar es el uso de clases en lugar de ID de los elementos DOM generados. Dando el mismo ID de más de un elemento DOM es generalmente una mala cosa y puede causar algunos dolores de cabeza y los insectos más por el camino.

Además, es posible que desee ver en la creación de nodos DOM en lugar de utilizar innerHTML para generar los controles. Sería más fácil para mantener las referencias a los elementos y controladores de eventos gancho en ellos.

Answer 2

Tal vez esto es lo que está pensando ...

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

Esto crea una referencia a una función anónima que encuentra el objeto (s) de JQuery y se ejecuta la función que desea ejecutar.