Problem with nested template

[pedroriverove]

<template id="noti-log">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-warning"></i>
            <span class="label label-danger">{{numero}}</span>
        </a>
        <ul class="dropdown-menu">
            <li class="header">You have {{numero}} log items</li>
            <template id="templatelog">
                <li>
                    <ul class="menu">
                        <li>
                            <a href="#">
                                <i class="fa fa-warning"></i> 5 new members joined today
                            </a>
                        </li>
                    </ul>
                </li>
            </template>
            <li class="footer">
                <?php echo Html::a(Yii::t('backend', 'View all'), ['/log/index']) ?>
            </li>
        </ul>
</template>

<li id="noti-app-log" class="dropdown notifications-menu">
     <!--Render template id="noti-log"-->
</li>

var $notiLog = $('#noti-app-log');
var notiTemplateLog = $('#noti-log').html();

var notiTemplateLog2 = $('#templatelog').html();

function renderShowsLog(show) {
	$notiLog.append(Mustache.render(notiTemplateLog, show));
}

function renderDataLog(shows) {
	shows['items'].forEach (function (show) {
		console.log(show);
		$notiLog.append(Mustache.render(notiTemplateLog2, show));
	})
}

$(logCount());
$(logData());

setInterval(function (){
	logCount()
}, 10000);
setInterval(function (){
	logData()
}, 10000);

function logCount() {
	$.ajax({
		type: 'GET',
		url: url + 'services/count-log',
		success: function (show) {
			if (auxLog !== show){
				$notiLog.children().remove();
				renderShowsLog(show);
				auxLog = show;
			}
		}
	});
}

function logData() {
	$.ajax({
		type: 'GET',
		url: url + 'services/data-log',
		success: function (shows) {
			if (dataLog !== shows){
				$notiLog.children().remove();
				renderDataLog(shows);
				dataLog = shows;
			}
		}
	});
}

The <template id="noti-log"> is showing it perfectly. When I try to show the other service in <template id="templatelog"> I get the following error: "Uncaught TypeError: Invalid template! Template should be a" string "but" undefined "was given as the first argument for mustache # render ( template, view, partials) ". I do not know how to show the data in nested templates.

[peter-veres]

$('#templatelog') does not work correctly, because your template #templatelog is inside of template #noti-log, thats incorrect. You have to move the second template outside of the template. Otherwise $('#templatelog') will not work. Thats because content is "inert".

https://www.html5rocks.com/en/tutorials/webcomponents/template/