Onsen 2 with jQuery and loading json into list

[sc]

First of all sorry if this is a stupid, basic question but my problem is that I’m trying to develop a web app/app using Onsen 2 with jQuery, and not Angular, and having a struggle trying to understand how it works as most of the examples refer to Angular. I’m also new to Onsen and jumping in straight at version 2 and so bypassing Angular.

What I’m trying to do should be straight forward. I’m clicking off my ‘home’ page to show a list of contacts that I want to download from a REST service. I’ve seen something that talks about an Angular controller that is linked to a page, which calls the REST service, and then uses Angular in the list to populate it. I’ve got the navigation from the home page to a second page working, just need to work out how to retrieve the data and write it out without Angular,

I’m familiar with jquery mobile and events where you can load data and was looking for something similar in Onsen, or is Angular the only way to do it? I think I may have come across something in an earlier post to capture page events using plain javascript which is what I was looking for. The question then is how do you write the data to the list? Is that just a case of writing the data to a div and using the compile() command.

Think I may have worked it out as I wrote this posting. Has anyone got any examples of how this would work?

Thanks
Shaun

[munsterlander]

@sc Please look at this thread:

https://community.onsen.io/topic/261/dynamic-html-error-onsen-2/6

Here is a bit of code for dynamically adding items to a list. You would just do your service call and on result, loop through your data and add list items.

var onsItem= document.createElement('ons-list-item');
       onsItem.setAttribute('modifier', "chevron");
       onsItem.setAttribute('onclick', "functionName()");
       onsItem.innerHTML = '<img src="" alt="something here" />';
document.getElementById('listIDorSomething').appendChild(onsItem);

@Fran-Diox recommends you also use:

I’d only change onsItem.setAttribute('onclick', "functionName()"); with onsItem.onclick = function() {...};.

[Fran Diox]

@sc I think this app could help you: https://github.com/frankdiox/OnsenUI-Todo-App

[sc]

Thanks both that will be a big help.

Shaun

[sc]

Quick question. Got a list working using an onclick as above, passing a couple of pieces of information to my javascript function.

Looking at your example app and the article on unobtrusive javascript i was wondering whether it’s better to use a controller click handler (based on a selector by class?) and then somehow read the parameters from the list? Is there a standard practice for supplying additional data to a list item?

[Fran Diox]

@sc I’m not sure what you mean, but maybe is something like this. You can have arrays or objects to store your items data. I’m using the ID there but you can use classes or attributes.

[sc]

Nice. Never thought of using arrays to store the data. Probably what I was thinking of was attributes and using the click handler with “this”. At the moment my list items have an onclick calling a function with a number of arguments. Wondering which was correct after reading that article on unobtrusive javascript.