Question

我正在尝试使用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>

然而，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 - 实际上它也试图更加通用，因此你不需要这里提到的其他两种方法。

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

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

如果您只是想添加一个简单的事件监听器，而您没有特别使用onsen做任何事情，那么您可以不使用它，但如果您这样做，它会更安全，更简单。在演示中我想大多数时候并不是真的需要，但有时我们只是习惯性地添加它。我的建议是在你的应用程序的所有初始化中使用它。

现在关于你上一个问题的另一个小注：在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（）的用例？

1 个答案: