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, и ссылку на новости в виде href этого тега привязки.

Поскольку новостей может быть несколько, мне нужно повторитьза каждую новость.Я хотел бы сделать это наилучшим образом.Я могу вручную создать DOM для каждого значения News, используя dojo.create или dojo.place. Но это требует много жесткого кодирования.Не могли бы вы предложить мне лучший способ сделать это?Возможно ли это сделать в самом шаблоне Widget?

Answer 1

Самый простой способ - создать закрытый шаблонный виджет, представляющий отдельную новость.

например

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

Затем, когда вы извлекаете список новостей из вашей службы данных, вы можете просто перебрать каждый элемент этого массива, создать новый виджет NewsItem и поместить его в ваше тело, this.newsHomeTableTbody.

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

},this);