After Ajax-Call and Template rendering: how to access toggle ements

Questions
1

i have one problem. i do an ajax call, get some json data and fill a list. so far everything is working well. my html-list/template will have a toggle-emelent. you can i access this element and get the state on change?

this is my template

<script id="eventListe" type="text/template7">
	<div class="list media-list">
		<ul>
			{{#each events}}
			<li>
				<div class="item-content">
					<div class="item-media">
					<label class="toggle toggle-init color-blue" id="toggle{{nr}}">
						<input type="checkbox">
						<span class="toggle-icon"></span>
					</label>
				</div>
			</li>
			{{/each}}
		</ul>
	</div>
</script>

on a normal list direct in index.html i could use something like

$$('.toggle').on('change', function () {
	var i = $$(this).attr('id');
	console.log('toggle changed: ' + i);
	var toggle = scannerApp.toggle.get('#'+i);
	console.log(toggle);
	if (toggle && toggle.checked) {
		console.log('toggle ON: #'+i)
		// do something
	} else {
		console.log('toggle off: #'+i)
	}
});

but after doing an ajax-call, rendering the template and inserting the resulting html in index.html (i have a div #eventHTML where the resulting html will be put in) i can’t use $$(.toggle.)on(‘change’…) it is not working.

should i use an onChange on the label and call a javascript function or is there any way to get this working after the template is compiled and the resulting html is inserted?

this is part of my app.js

var eventsTemplate = $$('#eventListe').html();
// compile it with Template7
var showEventsTemplate = Template7.compile(eventsTemplate);

// stripped error handling, asuming everything is ok and status always 200 OK
function showEventListe() {
	scannerApp.request.json(myurl,
		function (data, status) {
			console.log('done ' + status);
			var ergebnis = showEventsTemplate(data);
			$$('#eventHTML').html(ergebnis);
// HERE i want to use the $$('.toggle').on('change'....)
		},
	);
	return 1;
}

i am using framework7 v4.2

2

That is why it is better to use router component for this.

If you do it manually, toggle-init class won’t work and won’t init any toggles. So after you did the request you need to:

  • Init each toggle with app.toggle.create(...)
  • Add $('.toggle').on('change' ,...) listeners