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 가지 방법을 필요로하지 않으므로보다 보편적으로 시도합니다. 코르도바/폰갭으로 장치에 사용하는 경우 그것은 또한 브라우저에서 DOMContentLoaded 및 deviceready을 기다립니다 구성 요소를 기다리고 제외

등

기능은 적절한 DOM 트리를 가지고 보장되는 실행 그래서 기본적으로 할 때 ,로드 된 요소에 대한 온누리 방법, 코드도브에서 backbutton, pause 기타 이벤트.

특히 단순한 이벤트 리스너를 추가하고 싶다면 사용하지 않아도되지만 무료 인 경우 더 간단하고 간단합니다. 데모에서는 대부분 시간이 필요하지는 않지만 때로는 습관을 추가하는 경우도 있습니다. 내 제안은 귀하의 애플 리케이션의 모든 초기화에 그것을 사용하는 것입니다.

이전 질문에 대한 또 다른 작은 메모 : 탭바/탐색기/스플리터 등에서 페이지를 사용할 때 서버에서 페이지를로드 할 수있는 옵션이 있기 때문에로드가 동기인지 확인하지 않습니다. 대신.

따라서 페이지 자체가로드 될 때까지 기다려야합니다 (대부분의 경우 ons.ready 이후에 발생). 이미 init 이벤트를 찾았습니다. 그것이 대부분의 경우에 필요한 것입니다.

당신은 두 가지 방법 중 하나를 사용하여 처리기를 추가 할 수

: 당신이 할 수 있어야 이론적 있도록, 추가 인수로 선택기를 추가 할 수 있습니다 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

답변

관련 문제