Как я могу создать список на веб-странице, где каждый элемент основан на шаблоне, используя Javascript? - PullRequest
Новая
       34

Как я могу создать список на веб-странице, где каждый элемент основан на шаблоне, используя Javascript?

0 голосов
/ 10 февраля 2012

Я создаю страницу, предназначенную для использования в качестве элемента управления графическим интерфейсом с Awesomium. На этой странице я хочу получить список, содержимое которого контролируется приложением во время выполнения.

Awesomium позволяет отображать веб-страницы в буфере и, например, рисовать как текстуру объекта в 3D-приложении, поэтому нет «сервера» для запуска кода на стороне сервера и связи между «GUI» и приложение выполняется почти полностью с помощью вызовов функций Javascript и обратных вызовов.

Список будет состоять из нескольких <div> с, каждый из которых является относительно сложным, поэтому я хотел бы создать шаблон для записи, которую можно заполнить и добавить в список.

До сих пор я делал нечто похожее на: 

    function refresh() {
        contentpane.innerHTML = '';
        var i = 0;
        for (i = 0; i < page.contentlist.length; i++) {
            contentpane.innerHTML += '<div id=\'' + page.contentlist[i] + '\'class="button" onclick=page.callback("clicked",id) > <img src="\screenshot.jpg"/> <label ></label> </div>';
        }
    }

Но чем сложнее записи в моем списке, тем громче это становится, поэтому я думаю, что должен быть лучший способ.

Какой самый простой способ создать список шаблонных элементов в функции Javascript?

Есть ли что-то похожее, система DataTemplate WPF, которую я мог бы использовать?

Ответы [ 2 ]

1 голос
/ 10 февраля 2012

Я бы предложил что-то вроде инструмента шаблонов ...

Ваше приложение должно генерировать данные JSON, которые вы можете получить и показать с помощью упомянутого инструмента. Таким образом, вы получите четкое разделение представления и логики.

Пример создания списка будет выглядеть так:

HTML 

<table class="playerList">
  <thead>
    <tr>
      <th>Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="player">
      <td>Chloe</td>
    </tr>
  </tbody>
</table>

ДИРЕКТИВА 

{
  "tbody tr": {
    "player<-players": {
      "td": "player",
      "td@style": "\"cursor:pointer\"",
      "td@onclick": "\"clickLine(this);\""
    }
  }
}

DATA 

{
  "players": [
    "Adrian Meador",
    "Bryan OConnor",
    "Todd Swift",
    "Valerie Paige",
    "Walter Hagelstein",
    "Wendy Leatherbury"
  ]
}

РЕЗУЛЬТАТ 

Player
Adrian Meador
Bryan OConnor
Todd Swift
Valerie Paige
Walter Hagelstein
Wendy Leatherbury
1 голос
/ 10 февраля 2012

Underscore.js имеет шаблонизатор , на который вы можете взглянуть.Вы также можете поместить шаблоны в отдельные файлы и при необходимости загрузить их через ajax.

Допустим, у вас есть следующий шаблон: 

<script type="text/template" id="tmpl-listentry">
  <div id='<%= content %>' class="button" onclick='page.callback("clicked",id)'>
    <img src="/screenshot.jpg" />
    <label></label>
  </div>
</script>

Затем вы можете использовать его после загрузки и прикрепленияэто к вашему документу: 

function refresh() {
    var i = 0,
        tmplElem = document.getElementById('tmpl-listentry'),
        compiled = _.template(tmplElem.innerHTML);

    contentpane.innerHTML = '';
    for (i = 0; i < page.contentlist.length; i++) {
        contentpane.innerHTML += compiled({content: page.contentlist[i]});
    }
}

Примечание: Конечно, вы должны скорее кэшировать ваш скомпилированный шаблон, чем компилировать его при каждом обновлении.

...