Fill list with new items on button click.

[uhunkler]

I am doing my fist steps to evaluate Onsen UI 2.0. I want to create mobile interfaces for IoT/robotic projects and look for a convenient environment to create the UI for those projects.

I am not sure if my approach to fill a list with new items on button click is correct. Because I didn’t find an example I tried with <ons-lazy-repeat id="dynamic-list"></ons-lazy-repeat>.

Please have a look at the codepen Onsen UI dynamic list which somehow solves the task.

• Is this the best approach or is there a better way to solve the task?
• How can the template be used for createItemContent: function(index, template)?
• How can the actual data be integrated into the template?

Thanks a lot for your answers.
Urs

[Fran Diox]

@uhunkler Hello, welcome to the community! Lazy Repeat component should be used for situations where you want to display thousands of items, not for just a few. Therefore, I’d say no, it’s not the best approach.

If what you want to do is loading more items when you scroll down, check ons-page's onInfiniteScroll property/attribute. There is an app using it here (made with AngularJS but using the same feature). It has different styles for iOS and Android and in both you can see a simple spinner at the bottom while it automatically loads new items.

If you simply want to render a list and change its content afterward… well, you can do it as it’s been always done in JavaScript, creating new elements and appending them. LazyRepeat is not meant to be used as a ngRepeat or v-for. If you want that functionality, I think you should try a framework like Angular, Vue or React (which are also supported in Onsen UI).

And to answer the questions about LazyRepeat, the template is an HTMLElement that you can clone and then set its innerHTML, attributes or do whatever you want with it.

Hope it helps! :)

[uhunkler]

@Fran-Diox Thanks for your answer.

The task is to display the list of paired bluetooth devices. I need to fetch them via the Cordova plugin «cordova-plugin-bluetooth-serial» and show them in a list. And offer a button to refresh the list.

When I read your answer correct, you propose to not use ons-list at all but a normal HTML list. I was hoping to be able to use the ons-list to get a consistent list styling.

Are there classes that I can use with HTML tags to get that same styling as the ons-* tags?

[munsterlander]

@uhunkler Take a look at this thread: https://community.onsen.io/topic/1097/add-items-to-ons-list-vanilla-js/2

I think this will answer your questions.

[Fran Diox]

@uhunkler You can still use ons-list. I said creating new elements and appending them, and that includes ons-list and ons-list-item. Those are just HTML elements. You can find more info in the link provided by @munsterlander
Apart from document.createElement('ons-list-item'), you can also prepare a string template like var template = '<ons-list-item><div class="center">{{something}}</div></ons-list-item>. Then, for every item you want to add, simply copy the template and change whatever you need and create a new HTML element with it:

var div = document.createElement('div');
div.innerHTML = template.replace('{{something}}', content);
var newItem = div.firstChild;
myList.appendChild(newItem);

There’s another example here (To-do app).

[uhunkler]

@Fran-Diox, @munsterlander, thanks a lot for your valuable feedback, the links are very helpful. Looking at the To-do app I found answers to some questions I hadn’t asked yet.