Toggling màn hình hiển thị của một Dojo dijit

Question

Tôi đang cố gắng thực hiện một chương trình cơ bản/ẩn của một dijit div trong Dojo. Dựa trên các khuôn khổ javascript khác mà tôi đã làm việc với, điều này phải dễ dàng, nhưng tôi thấy nó khó khăn nhất.

Đây là mã từ

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

Dưới đây là mã của tôi trong cơ thể.

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

Hành vi mà tôi thấy ngay bây giờ là div được hiển thị ngay sau khi nhấp vào nút, nhưng sau đó lại bị ẩn. Tôi đang làm gì sai?

Answer 1

Tôi nghĩ rằng bạn có hiển thị/ẩn logic ngược? Ngoài ra, tôi nghĩ 'hiển thị' là từ một phiên bản Dojo rất, rất cũ. Hãy thử chỉ cần nhìn vào phong cách thay vì (lưu ý rằng đây lại một lần nữa flips logic như tôi kiểm tra 'none')

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

Có một ví dụ in the docs trong đó sử dụng dojo.connect để đạt được tác dụng tương tự.