javascript - 从纯 JavaScript 到 dojo 框架

Question

我已经开始学习dojo Toolkit，到目前为止我很喜欢它，在我看来它比jquery/prototype JS更容易理解。我对它(以及JavaScript)还是新手，虽然网上有大量可用的文档，但我并不真正了解如何实现简单的任务，例如使用dojo使隐藏可见。那么问题来了:

html

<!-- the numder in id="comment" and in href="javascript:display_comments('')" is the post_id that i want the comments to be fetched for -->

<div class="comments">
    <a id="comment8" href="javascript:display_comments('8');">comments</a>(21)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

<div class="comments">
    <a id="comment7" href="javascript:display_comments('7');">comments</a>(13)
</div>
<div style="visibility: hidden;" id="display_comments7">

</div>

<div class="comments">
    <a id="comment15" href="javascript:display_comments('15');">comments</a>(20)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

JavaScript

function display_comments(id) {
    divid = 'display_comments'+id;
    var element = document.getElementById(divid);
    if(element.style.visibility == 'hidden') {
        element.style.visibility='visible'
    }else if(element.style.visibility == 'visible') {
        element.style.visibility='hidden';
        element.innerHTML='';
    }
}

post_id 中的 display_comments() 参数随后与单词“display_comments”合并，以便知道要使哪个 div 可见。在dojo中如何实现这一点？

Answer 1

基本上，您想要在这里做的是自动化一些事情，对吧？如果您通过 id 为链接添加属性(就像我下面使用的那样)，或者通过其他方式(不可验证的属性或 html5 数据属性)，那么您可以使用 dojo.query 查找容器中的所有节点并向它们附加一个事件。如果您想让查询语法更加具体，我为您提供了 dojo.query 语法页面的链接。

循环遍历容器中的所有 a 节点并使用传递节点 id 的处理程序(dojo.partial 内容)附加单击事件后，您只需处理单击事件即可。切换显示使用 dojo 核心来更改和修改节点的样式 - 非常简单。

根据您的示例，这就是我更改您的代码的方式。

有很多方法可以实现这些结果。就我个人而言，我会创建模板化的小部件。由于此代码看起来重复，因此您可以 dojo.declare 注释类并 dojoattachevents 到链接，dojoattachpoint 到隐藏节点。这样您就不必使用 dojo.query 或 dojo.byId 因为 widget 会为您连接所有这些。您可以为每个创建一个并使用类语法来处理逻辑。

<div id="container">
<div class="comments">
    <a id="8">comments</a>(21)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

<div class="comments">
    <a id="7">comments</a>(13)
</div>
<div style="visibility: hidden;" id="display_comments7">
<div>

dojo.query reference

dojo.query("#container a").forEach(function(node) {

dojo.connect reference

dojo.partial reference

dojo.connect(node, 'onclick', dojo.partial(toggleDisplay, node.id));
});

dojo.byId reference
dojo.style reference

   function toggleDisplay(node) {
        var hiddenNode = dojo.byId('display_comments' + node);
        var display = dojo.style(hiddenNode).visibility === 'visible' ? 'hidden' : 'visible';
        dojo.style(hiddenNode, {
            visibility: display
        });
    }

工作示例 jsfiddle example

书籍

我们有dojo the definitive guide和 mastering dojo和 getting startED with dojo 。PS 所有这些书籍都已过时，最好的信息可以在测试页面/irc#dojo 聊天室/和引用指南上找到。