Esto me está volviendo loca. ¿Alguien puede ver lo que estoy haciendo mal?
Aquí está mi plantilla HTML.
<template id="note-template"> <div class="trip-note"> </div> <div class="trip-note-footer"> <div class="d-flex justify-content-between"> <div> <span class="note-author"></span> • <span class="note-date"></span> </div> <div> <img class="edit-note" src="~/images/tteditnote.png" title="Edit Note"> <img class="delete-note" src="~/images/ttdeletenote.png" title="Delete Note"> </div> </div> </div> </template>Y aquí está mi JavaScript.
var $container = $('#trip-notes'); var $template = $('#note-template'); $container.empty(); response.forEach(function (element) { var $note = $($template.html()); $note.find('.trip-note').html(element.html); $note.find('.note-author').text(element.author); $note.find('.note-date').text(element.createDate); $container.append($note); }); Todo funciona exactamente como se esperaba, excepto que mi div.trip-note no se establece en el valor de element.html .
author y createDate están bien configurados. He confirmado que element.html contiene el marcado esperado. He vuelto a escribir el nombre de la clase varias veces (tanto en marcado como en JavaScript). Intenté mezclar y hacer coincidir html() y text() y el resultado es siempre el mismo: todos los elementos se completan excepto div.trip-note .
O me estoy perdiendo algo muy estúpido o hay un problema peculiar.
Actualizar
He creado un jsfiddle .
.find() busca descendientes, no encontrará el elemento de nivel superior desde el que está buscando. Dado que .trip-note es uno de los elementos de nivel superior de $note , es una nota seleccionada.
En lugar de usar $template.html() , haga un clon de $template . Entonces todo será descendiente. Puede usar .html() cuando agrega a $container para excluir el elemento de nivel superior <template> .
var $container = $('#trip-notes'); var $template = $('#note-template'); $container.empty(); response.forEach(function (element) { var $note = $template.clone(); $note.find('.trip-note').html(element.html); $note.find('.note-author').text(element.author); $note.find('.note-date').text(element.createDate); $container.append($note.html()); });