ons.ready（）の用途は何ですか？

私はOnsenUI 2（現在rc12）とjQuery（3.0.0）を使ってアプリケーションを構築しようとしています。 ons.ready（）を使って多くの例があります。私の言うことを混乱させるのは、自分のウェブサイトで始める例題がその機能を使用しているということです。（どちらの例もindex.htmlのヘッダです）ons.ready（）の用途は何ですか？

<!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>

、タブバー（レイアウトテンプレート; VS2015例のものと同じ）のためOnsenUIドキュメントを使用し（ただし、文脈でそれを示していません）。

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

そして、OnsenUIのインタラクティブなチュートリアルは同じです。それらの約半分はそれを使用し、もう半分は使用しません。それはいつ使うべきですか？

出典

2016-06-21 rancor1223

私は短い答えはちょうどそれを常に使用することだと思う - あなた自身のいくつかのトラブルを救うでしょう。

基本的には、Onsen UIの準備ができてから機能が実行されることを保証します。その瞬間の前に何かをしようとするのはちょっと危険です。基本的には、あなたのアプリを起動するときに、OnsenのUIは、そのコンポーネントのすべて（すべてのons-xxx要素）だけでなく、いくつかのものを初期化する時間が必要です。

あなたのprevious questionに関しては、実際にはもっと普遍的なものとなり、ここで述べた他の2つの方法は必要ありません。そのコンポーネントを待っている場合を除き

コルドバ/ PhoneGapの持つデバイスで使用されるとき、それはまた、ブラウザとdevicereadyにDOMContentLoadedを待ちなど

機能が実行されたときに、基本的には、適切なDOMツリーを持っていることが保証されています、ロードされた要素のonsen uiメソッド、コードブロのbackbutton、pauseなどのイベントが含まれます。

特に温泉で何もしていないシンプルなイベントリスナーを追加したいだけなら、自由に使用することはできますが、そうした方が安全で簡単です。デモではほとんどの時間は本当に必要ではないと思っていますが、時には習慣から外すこともあります。私の提案は、あなたのアプリケーションのすべての初期化でそれを使用することです。タブバー/ナビゲータ/スプリッタなどでページを使用している場合、サーバーからページを読み込むオプションがあるため、読み込みが同期しているとは限りません代わりに。

そのため、ページ自体が読み込まれるのを待つ必要があります（ほとんどの場合、ons.readyの後に発生します）。すでにinitイベントが見つかりました。それはあなたがほとんどの場合に必要とするものです。

次の2つの方法のいずれかでハンドラを追加することができますjQueryので

// 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 
    } 
});

を理論的にはあなたも

ような何かを行うことができるはずですので、あなたは、追加の引数としてセレクタを追加することができます myPageが ページ、 ないテンプレートのIDでなければならないこと

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

は

注意。

ボーナス - ページが表示された直後に何かを実行したい場合（たとえば、アニメーションなど）、代わりにshowイベントを使用できます。

出典

2016-06-21 13:47:16

他の読者への注：上記の質問は重複していませんでしたが、私はそれがいくつかのユニークな風味を持っていたので、適切に答えられたとは思いません。それがここで答えられた理由です。 jQueryの広範な使用は、それがその質問で言及されたという事実によるものでもあります。これはjQueryの質問ではありませんが、プロジェクトで既に使用されているOPが使用される可能性が高いので、いくつかのノートを共有すると便利だと思いました。 –

ありがとう！私の以前の質問については、私の理解の不足で少し間違っていました（私はdoumentationのコードを見ていませんでしたが、私は前にはなかったと誓っていたでしょう:)。（私はそれを本当に理解していませんでした）その時、私には何の使い道もありませんでした。決して少なくはありません、私はようやくあなたが提供した同じコードで昨日働いています。私はそれを正しくやっていることを知ってうれしい。私は前の投稿にもこの回答をリンクしています。誰かがそれに遭遇した場合に備えて（完全に答えているので） – rancor1223

ons.ready（）の説明に感謝し、私はそれに応じて私のコードを編集しました:) – rancor1223

ons.ready（）の用途は何ですか？

答えて

関連する問題