Ready event for templates

Question

In JsViews i can bind events in the following way:

<li id="myElement" data-link="{on 'click' eventHandler}">Some Content</li>

This will execute the method "eventHandler" after a click. But I need an event which will be fired when the template is loaded. I tried "ready" or "show", but nothings works. Is there a event which can handle this?

BorisMoore BorisMoore · Accepted Answer · 2020-02-16T20:21:54

The {on xxx eventHandler} handles events on HTML elements, such as mouse events, submit, change, blur, etc.

With JsViews, the loading of the template happens directly as a result of your own code calling the link method. So elements in the rendered template will have been rendered during that call, and immediately after you can run whatever code you want to call after rendering and linking, such as using jQuery to find your <li> element, and act on the element

JsViews also provides many life-cycle events on tags, so if you want you can create a custom tag just for handling those events:

For example, try running the following code:

<span id="result"></span>

<script>
var data = {};

$.views.tags("test", {
  attr:"none",
    render: function(data) {
      debugger;
    },
    onBind: function(tagCtx, linkCtx) {
      var elem = this.parentElem;
      elem.textContent += " added text";
    }
  });

  var myTmpl = $.templates('<ul><li id="myElement" data-link="{test}">Some Content</li></ul>');

myTmpl.link("#result", data);

$("#myElement").css('color', 'red');
</script>

Ready event for templates

2 Answers