Dojo动态创建DOM节点

Question

我正在尝试为我的应用程序创建一个自定义Dojo小部件。

<!-- Dojo widget Template  -->
<div class="newsHomeWidget">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody dojoAttachPoint="newsHomeTableTbody">
            <!-- May be we need to repeat this code dynamically -->
            <tr>
                <td class="ncmseparate">
                    <a class="wordwrap" dojoAttachPoint="newsHomeLink"></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

这个小部件用于显示我从我的服务获取的新闻列表，数据以 JSON 格式获取。我需要在class为 wordWrap 的锚点标记中显示新闻文本，并将新闻链接作为此锚点标记的 href。

由于可能有多个新闻，所以需要为每个新闻重复此操作。我希望以最佳方式完成这项工作。我可以使用 dojo.create 或 dojo.place 为每个新闻值手动创建 DOM，但那需要很多硬编码。您能否建议我最佳方法？是否可能在小部件模板本身中完成此操作？

- Apps

---

你使用的是哪个版本的Dojo？（1.7与之前的版本有一些重大区别。） - fncomp

Answer 1

最简单的方法是创建一个私有化的模板小部件，代表一个个新闻项。

例如：

dojo.declare('NewsItem',[dijit._Widget,dijit._Templated],{
  url:'',
  headline:'',
  //template abbreviated
  templateString:'<tr><td><a href="${url}>${headline}</a></td></tr>'
});

当你从数据服务中检索新闻列表时，你只需遍历该数组的每个元素并创建一个新的NewsItem小部件，然后将其放置在你的tbody中，this.newsHomeTableTbody。

var newsArray = [...]
dojo.forEach(newsArray, function(newsLink){
  var newsItem = new NewsItem({
    url: newsLink.url,
    headline: newsLink.headline
  });
  newsItem.placeAt(this.newsHomeTableTbody);

},this);

- BuffaloBuffalo

---

谢谢回复。有一个问题。在下面的代码中，“newsItem.placeAt(this.newsHomeTableTbody);”中的“this”将是全局作用域，对吗？那么如果是这样，我怎么才能访问newsHomeTablyTbody呢？ - Apps

dojo.forEach函数接受一个数组、一个函数和一个可选的作用域参数。我认为这段代码将在您的自定义模板小部件内执行，因此我在dojo.forEach函数调用中使用了this作为第三个参数。如果您在其他地方创建“NewsItems”，也可以轻松地传入自定义小部件的实例：dojo.forEach(newsArray,newItemCreationFunction, instanceOfNewsHomeWidget); - BuffaloBuffalo

我能够构建这个小部件。谢谢你的帮助。但是在我的代码中，我正在做以下操作。 <table> <tbody id="newsContentTable"> </tbody> </table> 动态元素被插入到 "newsContentTable" 中。但这是一个完整的小部件吗？我需要上述结构才能使该小部件工作吗？我该如何改进它？ - Apps

从设计角度来看，“NewsItem”小部件类与一般“News”小部件紧密耦合。如果不了解更大的情况，很难说如何改进它。 - BuffaloBuffalo

好的。我明白了，也许改变结构会有所帮助，比如使用DIV而非表格。 - Apps