Отображение данных AJAX на странице шаблона - Framework7 - PullRequest
Новая
       29

Отображение данных AJAX на странице шаблона - Framework7

0 голосов
/ 07 июня 2018

Играю с Framework7 для разработки гибридного мобильного приложения.У меня есть три вкладки (внизу фиксированные), которые Home, Contacts и Settings/Profile

Мой app.js файл выглядит примерно так: 

var $$ = Dom7;

var app  = new Framework7({

    //.....

    data: function () {
        return {
            user_profile : ''               
        }
    },

    on: {
        tabShow( tab )  //-- when a bottom tab is clicked
        {               
            if( $$(tab).attr('id') == 'view-settings' )
            {
                //.. do ajax call and get the response data in "resp"

                app.data.user_profile = resp.response.profile;  //setting the info to app's data

            }           
        }
    },

    routes: routes
});

var settingsView = app.views.create('#view-settings', {
    url: '/settings/'
});

И в routes.js: 

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/contacts/',
    componentUrl: './pages/contacts.html',
  },
  {
    path: '/settings/',
    componentUrl: './pages/settings.html',
  }
];

Эта страница Контакты содержит статическое содержимое.Для страницы Home я выполняю вызов API AJAX в состоянии deviceready.Потому что я настраиваю там некоторые заголовки для аутентификации и прочего (для всех вызовов API AJAX).

Проблема, с которой я столкнулся, заключается в том, что я не могу отобразить содержимое на странице Настройки .Это всегда пусто!

Я использую это на этой странице шаблона: 

<div class="item-title item-label">Full Name - {{$root.user_profile.full_name}}</div>

Я хочу скомпилировать этот шаблон только при нажатии соответствующей кнопки вкладки.Может быть, в этом проблема.

Есть предложения?

1 Ответ

0 голосов
/ 08 июня 2018

После того, как я снова и снова просматриваю документацию, у меня есть другой способ сделать это.

Итак, во время события tabShow я проверяю, имеет ли пользователь доступ к Настройки / Профиль таб.Если это так, я проверяю, является ли объект в app.data (например, app.data.user_profile пустым или нет (я сохраняю там данные профиля). Если он пуст, я бы сделал вызов API AJAX, чтобы получить детали профиля. Когда профильподробности получены, я бы использовал app.form.fillFromData() метод для заполнения формы. Документация здесь: https://framework7.io/docs/form.html#form-data-app-methods

Убедитесь, что имя формы, а также элементы ввода в этой форме, и то же имя должно бытьиспользовать в объекте (имя ключа) при вызове функции fillFromData().

И еще одна вещь, для маршрутов, /settings/ path, я использовал url вместо свойства componentUrl для передачиURL страницы.

Возможно, это не лучшее решение, но я все еще учусь. И, похоже, оно решено текущей проблемой.

Спасибо

...