ons.ready() 的用例是什么？

Question

我正在尝试使用 OnsenUI 2（当前为 rc12）和 jQuery (3.0.0) 构建应用程序。有很多使用 ons.ready() 来做……某事的例子。让我感到困惑的是，他们网站上的入门示例使用了该功能。（两个例子都是headers的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>

然而，Tabbar 的 OnsenUI 文档（布局模板；与 VS2015 示例中的相同）确实使用了它（尽管没有在上下文中显示）。

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

和OnsenUI互动教程一样。他们中大约有一半使用它，而另一半则没有。我应该什么时候使用它？

Answer 1

我想简短的回答是始终使用它 - 这样您就可以省去一些麻烦。

基本上它确保只有在Onsen UI准备好后才会执行该功能。因此，在那一刻之前尝试做某事有点冒险。基本上，当您启动应用程序时，Onsen UI 需要一些时间来初始化它的所有组件（所有 ons-xxx 元素）以及其他一些东西。

关于您的 previous question - 实际上它也试图变得更加通用，这样您就不需要这里提到的其他 2 种方法。

除了等待其组件外，它还在浏览器中等待 DOMContentLoaded，在具有 cordova/phonegap 等的设备中使用时 deviceready 等

所以基本上当函数被执行时，你可以确保在加载的元素上有一个正确的 dom 树、onsen ui 方法，以及 backbutton、pause 来自 cordova 的等事件。

如果您只想添加一个简单的事件侦听器，而您并没有对温泉做任何特别的事情，您可以不使用它，但如果您这样做会更安全、更简单。在演示中，我想大部分时间都不需要它，但有时我们只是出于习惯添加它。我的建议是在您的应用程序的所有初始化中使用它。

现在关于你之前的问题的另一个小提示：在 tabbar/navigator/splitter 等中使用页面时，我们不确保加载是同步的，因为您也可以选择从服务器加载页面。

因此您需要等待页面本身加载（大部分时间发生在 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必须是页面的id，不是模板。

奖励 - 如果您想在页面显示后立即执行某些操作（例如某些动画），您可以改用 show 事件。

ons.ready() 的用例是什么？

What's the usecase for ons.ready()?

cordova

onsen-ui