Реализация jQuery mobile: внешняя панель с кнопками, которые не выглядят так, как я хотел [дублировать]

Это одно из мест, с помощью которого привязка данных, используемая во многих новых фреймворках JavaScript, будет очень полезна для вас ...

Итак, если вы используете Angular, React или любые другие фреймворки, которые делают два способа связывания данных, эта проблема просто исправлена ​​для вас, поэтому простым языком ваш результат undefined на первом этапе, поэтому вы получили result = undefined до получения данных, а затем, как только вы получите результат , он будет обновляться и присваиваться новому значению, которое отвечает на ваш вызов Ajax ...

Но как вы можете сделать это в чистом javascript или jQuery, например, как вы задали этот вопрос?

Вы можете использовать обратный вызов, обещание и недавно наблюдаемое, чтобы обрабатывать его для вас, например, в обещаниях мы имеем некоторые функции, такие как success () или then (), которые будут выполняться, когда ваши данные будут готовы для вас, с функцией обратного вызова или подписки на наблюдаемые.

Например, в вашем случае, в котором вы используете jQuery, вы можете сделать что-то вроде этого:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

Для получения дополнительной информации n изучение обещаний и наблюдаемых, которые являются новыми способами для создания асинхронных материалов.

10
задан Mark Hollas 5 December 2013 в 08:43
поделиться

2 ответа

Примечание: атрибут data-theme должен быть добавлен к Внешней панели , поскольку он не наследует стиль / тему из контейнера parent . Внутренняя панель наследует стили / темы из страницы div , содержащие ее.

jQuery Mobile теперь предлагает внешнюю панель и панель инструментов. JQM не запускается автоматически. Они должны быть инициированы вручную, а затем .enhanceWithin() для улучшения содержимого внутри.

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

Демо

38
ответ дан Omar 26 August 2018 в 11:19
поделиться

Мне не разрешено комментировать, но в демо-версии @Omar многие значки data-icon="home" не отображаются, и если я добавлю class="ui-btn ui-icon-arrow-l" в Anchor, он не появится ни в одном из них, что-то большее, что нужно сделать.

С небольшим расследованием я обнаружил, что добавление добавления ui-btn-icon-left как таковое будет фиксировать привязки

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Anchor</a>

добавление этих классов в <li data-icon="home" не совсем работает, но изменение <li data-icon="home">item</li> до <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> приведет к появлению значка, но не будет перемещать текст, чтобы он выглядел плохо.

0
ответ дан LetTheBeatingBegin 26 August 2018 в 11:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: