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>

然而，爲的TabBar OnsenUI文檔（佈局模板;同爲一個在VS2015的例子）確實使用它（在上下文中不顯示它雖然）。

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的使用時，也等待在瀏覽器DOMContentLoaded和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事件。

來源

2016-06-21 13:47:16

給其他讀者的提示：提到的問題已被封閉爲重複，但我認爲它沒有被正確回答，因爲它有一些獨特的風味。這就是爲什麼在這裏回答。 jQuery的廣泛使用也是由於它在這個問題中提到的事實。儘管這不是一個jQuery問題，但我認爲分享一些有關它的註釋會很有用，因爲如果OP已經在項目中使用，OP將最有可能使用它。 –

非常感謝！至於我之前的問題，由於我缺乏理解（我沒有看到代碼中的代碼，但是我會發誓它之前沒有代碼），但是有一點誤導，儘管提供的答案（重複）當時對我沒有任何用處（我不是很瞭解它）。儘管如此，我終於在昨天用剛纔提供的相同代碼工作。很高興知道我做對了。我會在以前的文章中鏈接這個答案，以防有人絆倒它（因爲它完全是答案）。 – rancor1223

感謝ons.ready（）的解釋，我編輯了我的代碼:) – rancor1223

ons.ready（）有什麼用途？

回答

相關問題