Hogen.js - Load nested template with JS

Question

I got a postings template (Hogen.js) were I load data (api call from Laravel 5.3) into it.
I managed to load, compile and render the template and the data correctly.

Problem:
I have jquery/vanilla js scripts that need to work with the template and the data but somehow this JS is completely ignored by the rendered template and it doesn't work (onClick, other ajax calls etc.).

My load/render JS:

  var $page = 1;
var source   = $("#postTemplate").html();
var template = Hogan.compile(source);
$.ajax({
   url: '/api/postings',
   data: { page: $page} ,
   type: 'POST',
   success: function(data) {
        var output = template.render(data);
        $('.posts-container').prepend(output);
   }
});  

My Template:

<script id="postTemplate" type="text/x-hogan-template">
        @{{#posts.data}} 
        <div class="post">
            <div class="image">
                <img src="@{{ imageURL }}" alt="post image" />
            </div>

            <div class="info">
                <div class="like-count" data-like-id="@{{ id }}">
                    more html
                </div>
            </div>
            @include('partials.comments')
        </div>
        @{{/posts.data}}
</script> 

I include a partial from laravel with my "comment" code that needs to be execuded aswell (fadeIn, ajaxacalls,submit etc.)

Is it possible, that I cann ot execute my JS with the newly rendered template or DOM, because it's not available at document.ready?

Do I need to switch my template engine? Any other way to make this work?

JSON:

{
    "success": true,
    "posts": {
        "total": 46,
        "per_page": 20,
        "current_page": 3,
        "last_page": 3,
        "next_page_url": null,
        "prev_page_url": "http://localhost/api/postings?page=2",
        "from": 41,
        "to": 46,
        "data": {
            "40": {
                "id": 6,
                "name": " ",
                "imageURL": "",
                "city": "Spanien",
                "country": "",
                "created_at": "2018-03-11 09:40:25",
                "profilePictureURL": null,
                "social_src": 0,
                "mediumImageURL": null
            }
        }
    }
}

I stripped it down a bit!

Answer 1

You cannot use

   @include('partials.comments')

in your hgan.js template. Hogan is (almost) logicless. It is for binding JSON to HTML templates, it is not capable or intended for this use.

Partials can only be used like folows:

  var partialText = "normal text but can use {{foo}} is from a variable";
  var p = Hogan.compile(partialText);

  var text = "This template contains a partial ({{>partial}})."
  var t = Hogan.compile(text);

  var s = t.render({foo: chickens}, {partial: p});
  is(s, "This template contains a partial (normal text but we can use chickens. is a variable).", "partials work");

Basically {{>partial}} can be used to nest another precompiled template.