Alternar la pantalla de un Dojo dijit

Question

Estoy tratando de implementar un show/hide básico de un div dijit en Dojo. En base a otros frameworks de JavaScript con los que he trabajado, esto debería ser fácil, pero lo encuentro difícil en el mejor de los casos.

Aquí es el código de la

<script type="text/javascript"> 
dojo.require("dijit.form.Button"); 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dojo.fx"); 
var toggler = null; 
function basicToggle() { 
    toggler = new dojo.fx.Toggler({ 
     node: "panel", 
     showFunc : dojo.fx.wipeIn, 
     hideFunc : dojo.fx.wipeOut 
    }) 
} 
dojo.addOnLoad(basicToggle); 
</script> 

A continuación se muestra el código en el cuerpo.

<button dojoType="dijit.form.Button">  
    <img src="wrapper/images/header-settings.png" border="0" />  
    <script type="dojo/method" event="onClick"> 
     toggler[dijit.byId("panel").attr("displayed") ? 'show':'hide'](); 
    </script> 
</button> 
<div id="panel" dojoType="dijit.layout.ContentPane" style="border: .2em dotted  #900;display: none"> 
This is a content pane.</div> 
</body> 

El comportamiento que estoy viendo en este momento es que el div aparece momentáneamente después de hacer clic en el botón, pero luego se oculta de nuevo. ¿Qué estoy haciendo mal?

Answer 1

Creo que tiene la lógica show/hide al revés? Además, creo que 'exhibido' es de una versión muy, muy antigua de Dojo. Trate sólo mirar el estilo en su lugar (nótese que esto una vez más voltea la lógica como puedo comprobar si hay 'ninguna')

toggler[(dojo.style("panel","display") == "none") ? 'show':'hide'](); 

Hay un ejemplo que utiliza in the docs dojo.connect para lograr el mismo efecto.