Untitled

<!DOCTYPE html>
<html lang="en">
<body>

<script type="text/html" id="theTemplate">
    <div class="row" data-content="text"></div>
</script>

<div id="theContainer"></div>
<hr>
<div id="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.loadTemplate-1.5.0.js"></script>

<script type="text/javascript">
    var dataForTemplate = [
        { text: "First Row", misc: "data" },
        { text: "Second Row", misc: "different data" }
    ];

    var afterInsertFx = function(jqElement, data) {
        jqElement.data("test", data);
    };

    // "afterInsert" occurs before the template was appended to the document.
    // The append will wipe out jQuery.data().
    // This craziness saves the data to the side and adds it after the templating is complete.
    var saveMe = {};
    var index = 0;
    var UNIQUE_HTML5_DATA_ELEMENT_NAME = "data-somethingunique";

    var afterInsertFxSaveOnSide = function(jqElement, data) {
        var button = jqElement.attr(UNIQUE_HTML5_DATA_ELEMENT_NAME, ++index);
        saveMe[index] = data;
    };

    var postAfterInsertDataFix = function() {
        $.each($("#theContainer .row"), function(k, v) {
            var jqElement = $(v)
            jqElement.data("test", saveMe[jqElement.attr(UNIQUE_HTML5_DATA_ELEMENT_NAME)]);
            jqElement.removeAttr(UNIQUE_HTML5_DATA_ELEMENT_NAME);
        });
    };

    $(document).ready(function() {
        $("#theContainer").loadTemplate("#theTemplate", dataForTemplate, { append: true, afterInsert: afterInsertFx });
        $("#theContainer").loadTemplate("#theTemplate", dataForTemplate, { append: true, afterInsert: afterInsertFxSaveOnSide });
        postAfterInsertDataFix();
        $.each($("#theContainer .row"), function(k, v) {
            console.log($(v).data("test"));
            $("#output").append($("<div/>").text($(v).text() + ": " + $(v).data("test")) );
        });
    });

</script>

</body>
</html>