Using ons-lazy-repeat on ons-tab on OnsenUI 2 is not work
-
I’m a fresh developer using OnsenUI2 . i have faced a problem when using ons-lazy-repeat on “ons-tab” page . There is no any problems when using lazy-repeat without "“ons-tab”
there is an error of page is "Uncaught TypeError : Cannot Set property ‘delegate’ of null
the code is shown below . Could anyone can help me … i confused with this for a whole week…Thank You Very Much . T_T
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.js"></script> <script src="components/monaca-jquery/jquery.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <script> $(document).ready(function () { var menu = $('#menu')[0]; $(document).on("click",".tab_menu",function(){ menu.open(); }); $(".tab_list_items").on("click",function(){ var content = $('#content')[0]; var tab_id = $(this).attr("id"); var page = ""; switch(tab_id){ case "tab_home": page = "home.html"; break; case "tab_settings": page = "settings.html"; break; case "tab_about": page = "about.html"; break; } content.load(page) .then(menu.close.bind(menu)); }); }); ons.ready(function() { var infiniteList = document.getElementById('infinite-list'); infiniteList.delegate = { createItemContent: function(index, oldContent) { if (oldContent) { return oldContent; } var $element = $("<div><span style='opacity: 0.7;'><ons-icon icon='fa-spinner' spin='true'></ons-icon> Loading bacon...</span></div>"); var request = $.getJSON('https://baconipsum.com/api/?type=meat-and-filler&sentences=1&callback=?', function(data) { $element.text(data[0]); }); $element.data('request', request); return $element[0]; }, countItems: function() { return 1000; }, calculateItemHeight: function() { return ons.platform.isAndroid() ? 48 : 44; }, destroyItemContent: function(index, element) { var request = $element.data('request'); request.abort(); } }; }); </script> </head> <body> <ons-page id='index_page'> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item tappable class="list__item__line-height" > Testing List </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> </ons-page> </body> </html>
home.html
<ons-navigator> <ons-page> <ons-tabbar position="bottom"> <ons-tab icon="home" label="1" page="p1.html" ></ons-tab> <ons-tab icon="ion-ios-time" label="2" page="p2.html"></ons-tab> <ons-tab icon="ion-ios-flame" label="3" page="p3.html" active></ons-tab> <ons-tab icon="ion-outlet" label="4" page=""></ons-tab> <ons-tab icon="ion-android-favorite" label="5" page=""></ons-tab> <ons-tab icon="ion-ios-cart" label="6" page=""></ons-tab> <ons-tab icon="ion-ios-list" label="7" page=""></ons-tab> </ons-tabbar> </ons-page> </ons-navigator>
p3.html
<ons-navigator id='p3'> <ons-page> <ons-toolbar> <div class="center">Lists</div> </ons-toolbar> <ons-list> <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat> </ons-list> </ons-page> </ons-navigator>
-
@McGary The correct place to set up pages in Onsen 2 is in the page
init
event. More info about page lifecycle events here.Basically, try to set the delegate object on p3
init
event instead ofons.ready
.