Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > jQuery mobile, динамически наполнить ul

Автор: LLIbIcpEP 26.6.2011, 21:35

Здравствуйте.
Допустим, есть код:

Код


<ul data-role="listview" data-inset="true" data-theme="a">
    <li><a href="#questions_page">Begin test</a></li>
    <li><a href="#places_page">List places</a></li>
</ul>

В браузере это превращается в:

Код


<ul data-role="listview" data-inset="true" data-theme="a" class=" ui-listview  ui-listview-inset ui-corner-all ui-shadow ">
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-btn-up-a">
        <div class="ui-btn-inner ui-li ui-corner-top"><div class="ui-btn-text">
            <a href="#questions_page" class="ui-link-inherit">Begin test</a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-a">
        <div class="ui-btn-inner ui-li ui-corner-bottom"><div class="ui-btn-text">
            <a href="#places_page" class="ui-link-inherit">List places</a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
</ul>

Ссылки выглядят красивыми кнопочками. Теперь мне надо наполнять другой <ul/> динамически. Делаю так:

Код


<ul id="list_answers" data-role="listview" data-inset="true"
                    data-theme="c">
</ul>

Код


question['answers'].forEach(function(answer) {
    $('#list_answers').append('<li><a href="#questions_page">' + answer['value'] + '</a></li>');
});

Как итог:

Код


<ul id="list_answers" data-role="listview" data-inset="true" data-theme="c" class=" ui-listview  ui-listview-inset ui-corner-all ui-shadow ">
    <li><a href="#questions_page">1</a></li>
    <li><a href="#questions_page">2</a></li>
    <li><a href="#questions_page">3</a></li>
    <li><a href="#questions_page">4</a></li>
</ul>

Как-бы разница на лицо. Как с этим бороться, без ручного копипаста всех свойств?

Автор: LLIbIcpEP 26.6.2011, 22:04

Может есть другой способ решения моей задачи. Мне нужно получить такой-же список кнопочек, который получается в первом примере, только на этот раз ни содержание, ни даже количество этих кнопочек заранее не известно, это определяется по пришедшему JSON'у уже в ходе выполнения js.
Всего второй день за jQuery... с бизнес-логикой разобрался, джсон получил, распарсил, все круто.. а как до GUI дело дошло, облом.. не везет мне с интерфейсами, я видать рожден для серверного программирования(

Автор: нуп 26.6.2011, 23:24

Цитата(LLIbIcpEP @ 26.6.2011, 21:35

)

question['answers'].forEach(function(answer) {

Это вообще вроде только для мозилы O_O Вы же строите дерево, посмотрите, какая функция это делает smile

Автор: LLIbIcpEP 26.6.2011, 23:43

После постройки списка проблема решается вызовом

Код


$('#list_answers').listview("refresh");

Проблема решена smile