lazyRepeat copy-pasted tutorial throw error

[portapipe]

Hi.
I’m stuck at the first lines of my experience with OnsenUI.
I’ve copied and pasted the code found on the tutorial page about lazyRepeat and infiniteList.
Both throws:

TypeError: null is not an object (evaluating 'lazyRepeat')

I’ve added jQuery too, so I’ve tried to change the var lazyRepeat = document.querySelector('#list'); with var lazyRepeat = $('#list'); and the errors are gone BUT nothing happen.

I’ve used this tutorial for lazyRepeat and this for the infiniteList (and this too).

I really want to use Onsen (I’m moving from Ionic that messed all up with the version 2 of AngularJS) but I’m really stuck and can’t get why.

Thanks

Mac OSX 10.11.6
Command Line Interface for Monaca and Onsen UI
Monaca CLI Version 2.1.3

[munsterlander]

@portapipe Glad to see you are giving Onsen a try. I also came over after using Ionic. Real quick so I can help better, what is your environment? Onsen 2.0.2 with Angular 2, I am guessing?

[Fran Diox]

@portapipe Well, I guess you are pasting the code in the wrong place. var lazyRepeat = document.querySelector('#list') -> lazyRepeat variable is probably null, so it is not finding the lazy repeat element.

Common stuff: that code is run at the beginning of the app but your page with the elements is not attached yet. Notice that ons-template or separate html files are just templates, you cannot interact with them until you create a page with those templates.

If you didn’t yet, I’d recommend you to read this guide (select the framework you want). It will give you a general overview of how to do things in Onsen UI.

[portapipe]

Thanks :smiley:
I had to move a 3-time-rewritten huge project from Angular 1 to 2 and I had to give up after 4 updates that changed several basic stuff.
I’ve lost a 2 years work that was needed to open a startup company. Very very sad.

NOW.
I use plain javascript. I don’t want multiple nested frameworks anymore. If one change something everything must be rewritten (or at least follow the several changes).

[portapipe]

@Fran-Diox I moved that line outside the function and the error is still there. I’ve used javascript to get the element $('#element'); but there are errors like “refresh is undefined”.
I’m trying other things:

var lazyRepeat = document.querySelector('#list');
//var lazyRepeat = $('#list');

ons.ready(function() {
//window.addEventListener('load', function() {
	//var lazyRepeat = $('#list');
    lazyRepeat.delegate = {
      calculateItemHeight: function(index) {
       // Specify this if the height depends on the element.
       return 40;
     },
     createItemContent: function(index, template) {
       var dom = template.cloneNode(true);
       dom.innerText = "List item #" + index;
       return dom;
     },
     countItems: function() {
        // Return number of items.
       return 100000000;
     },
     destroyItem: function(index, item) {
       // Optional method that is called when an item is unloaded.
       console.log('Destroyed item with index: ' + index);
     }
    };
    console.log(lazyRepeat);
});

This code is in the app.js file that I

<script src="js/app.js"></script>

at the end of the index file.

[Fran Diox]

@portapipe $('#element') looks like jQuery, so it will return a jQuery object if I’m not wrong. I know Chrome implements something similar to $ but I guess you are not using that. Can you try with document.querySelector('#element') instead?
Also, do you have any navigation in your test app right now or is just a single page?

[portapipe]

@Fran-Diox
Ok I’ve edited the message above meanwhile you’re writing your post :)

I’m using the swipe template.
This is the homepage where I’m trying to show the list:

  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          The Title
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
		<ons-list id="list">
		  <ons-lazy-repeat>
		    <ons-list-item>--</ons-list-item>
		  </ons-lazy-repeat>
		</ons-list>
    </ons-page>
  </ons-template>

[Fran Diox]

So that’s why, your code is probably run before the page is attached. Use the page lifecycle init event for that. More info in the link I wrote before.

<ons-template id="home.html">
  <ons-page id="myLazyRepeatPage">
    ....
  </ons-page>
</ons-template

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'myLazyRepeatPage') {
    var lazyRepeat = document.querySelector('#list');
    lazyRepeat.delegate = { ... };
  }
});

[portapipe]

@Fran-Diox
Ok I write the code when you send me (thanks for your time).
The code you’ve sent me run without issues but nothing is written into the list box.
I’ve thought that the basic template will work out-of-the-box with the tutorial’s code.

[portapipe]

@Fran-Diox
YES!!!
I’ve used the infinite-list one (not the lazy-repeat tutorial code) and with your ‘init’ code it works! Great!

SO!

All the code of each page MUST be written into this init function, so I know that it works, am I wrong?

[Fran Diox]

@portapipe Yes, init event is where you should put your pages initialization code. If you have multiple pages you can do something like this (check the first 10 lines of app.js and controllers.js file).

For the lazy-repeat. I guess this is what you were looking for?

[munsterlander]

@portapipe Sorry for being late to the party and it looks like @Fran-Diox has solved your issues. I would like to pitch a few sites that really help out:

https://github.com/munsterlander/Onsen-Examples

https://tutorial.onsen.io/

https://onsen.io/v2/docs/js.html

https://onsen.io/v2/docs/guide/js/