Каков вариант использования ons.ready()?

Я пытаюсь создать приложение, используя OnsenUI 2 (в настоящее время rc12) и jQuery (3.0.0). Есть много примеров использования ons.ready() для... чего-то. Что меня смущает, так это то, что в примере «Начало работы» на их веб-сайте используется функция. (Оба примера являются заголовками index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script>
      ons.ready(function() {
        // Init code here
      });
    </script>
  </head>
  <body>
    <ons-navigator>
      <ons-page>
        Page 1
      </ons-page>
    </ons-navigator>
  </body>
</html>

Однако шаблоны в Visual Studio 2015 этого не делают.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />

  <!-- JS dependencies (order matters!) -->
  <script src="scripts/platformOverrides.js"></script>
  <script src="lib/onsen/js/onsenui.js"></script>

  <!-- CSS dependencies -->
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

  <title>Onsen UI Tabbar</title>

  <!-- App init -->
  <script>
    function alertMessage(){
        ons.notification.alert('Tapped!');
    }

    document.addEventListener('init', function(event) {
      var page = event.target;
      if(page.id === "home-page") {
        var i = 5,
          onsListContent = '',
          onsListItem = document.querySelector('#main-list').innerHTML;

        while(--i) {
          onsListContent += onsListItem;
        }

        document.getElementById('main-list').innerHTML = onsListContent;
      }

      if(page.id === "settings-page") {

      }
    });
  </script>

Тем не менее, документация OnsenUI для Tabbar (шаблон макета, такой же, как в примере VS2015) использует его (хотя и не показывает в контексте).

ons.ready(function() {
  var myTabbar = document.querySelector("ons-tabbar")
  myTabbar.addEventListener("prechange", function(e) {
    if (e.index == 1) {
      e.cancel();
    }
  })
})

И интерактивные учебники OnsenUI такие же. Примерно половина из них использует его, а другая нет. Когда я должен использовать его?


cordova onsen-ui
person rancor1223    schedule 21.06.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я предполагаю, что короткий ответ - просто использовать его всегда - таким образом вы избавите себя от некоторых проблем.

По сути, это гарантирует, что функция будет выполнена только после того, как пользовательский интерфейс Onsen будет готов. Так что пытаться что-то сделать до этого момента немного рискованно. По сути, когда вы запускаете свое приложение, пользовательскому интерфейсу Onsen требуется некоторое время для инициализации всех его компонентов (всех элементов ons-xxx), а также некоторых других вещей.

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

Помимо ожидания своих компонентов, он также ожидает DOMContentLoaded в браузере и deviceready при использовании на устройстве с Cordova/phonegap и т. д.

Таким образом, в основном, когда функция выполняется, вы получаете правильное дерево dom, методы onsen ui для загруженных элементов, а также события backbutton, pause и т. д. из кордовы.

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

А теперь еще одно небольшое замечание по вашему предыдущему вопросу: при использовании страницы в панели вкладок/навигаторе/разделителе и т. д. мы не гарантируем, что загрузка будет синхронной, поскольку у вас также есть возможность вместо этого загрузить страницу с сервера.

Поэтому вам нужно дождаться загрузки самой страницы (это происходит после ons.ready большую часть времени). Вы уже нашли событие init. Это то, что вам нужно в большинстве случаев.

Вы можете добавить обработчик любым из двух способов:

// Pure JS
document.addEventListener('init', function(e){
    if (e.target.id === 'myPage') {
        // have fun
    }
});
// jQuery
$(document).on('init', function(e){
    if (e.target.id === 'myPage') {
        // have fun
    }
});

В jQuery вы можете добавить селектор в качестве дополнительного аргумента, поэтому теоретически вы также сможете сделать что-то вроде

$(document).on('init', '#myPage', function(e){
    // have fun
});

Обратите внимание, что myPage должен быть идентификатором страницы, а не шаблона.

Бонус - если вы хотите выполнить что-то сразу после того, как страница была показана (например, какую-то анимацию), вы можете вместо этого использовать событие show.

person Ilia Yatchev    schedule 21.06.2016
comment
Примечание для других читателей: упомянутый вопрос был закрыт как дубликат, но я не думаю, что на него был дан правильный ответ, поскольку он имел какой-то уникальный оттенок. Вот почему здесь ответили. Широкое использование jQuery также связано с тем, что он упоминался в этом вопросе. Несмотря на то, что это не вопрос jQuery, я подумал, что было бы полезно поделиться некоторыми заметками об этом, поскольку это то, что, скорее всего, будет использовать OP, если он уже используется в проекте. - person Ilia Yatchev; 21.06.2016
comment
Большое спасибо! Что касается моего предыдущего вопроса, он был немного ошибочным из-за моего непонимания (я не вижу кода в документации, но я бы поклялся, что его не было раньше :), хотя предоставленный ответ (дубликат) был не В то время мне это не приносило никакой пользы (я действительно этого не понимал). Тем не менее, вчера я, наконец, получил работу с тем же кодом, который вы только что предоставили. Рад узнать, что я делаю это правильно. Я также свяжу этот ответ в своем предыдущем посте на случай, если кто-то наткнется на него (поскольку он отлично отвечает на него). - person rancor1223; 22.06.2016
comment
И спасибо за объяснение ons.ready(), я соответствующим образом отредактировал свой код :) - person rancor1223; 22.06.2016