dom - 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 格式的数据。我需要在类为 wordWrap 的 anchor 标记中显示新闻文本，并将新闻链接显示为该 anchor 标记的 href。

由于可以有多个新闻，我需要为每个新闻重复。我想以最好的方式做到这一点。我可以使用 dojo.create 或 dojo.place 为 News 的每个值手动创建 DOM。但这需要大量的硬编码。你能建议我最好的方法吗？是否可以在 Widget 模板本身中执行此操作？

Answer 1

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

例如

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