Jsrender template call a javascript function

Question

I have the following template:

<script id="testTemplate" type="text/x-template">
   <div class="btn-action">
      <button onclick='displayDiv(this.id, "${Status}")' id="temp-${tempId}">
        <i class="material-icons">more_vert</i>
      </button>
    </div>
</script>

The javascript is as below:

function displayDiv(clickedId, status) {
/*some code here*/
}

The type of ${Status} is a string. The page however is rendered as below:

<button onclick="displayDiv(this.id, " pending')'="" id="temp-128"><i class="material-icons">more_vert</i></button>

And I get an error when I click on the button:

Uncaught SyntaxError: Unexpected end of input

Any one can help with the correct syntaxe here please? I am new to js-render and javascript coding. Thanks

Answer 1

${Status} is not valid syntax for JsRender. (It is correct syntax for jQuery-templates).

You probably want something like:

  <button onclick='displayDiv(this.id, "{{:Status}}")' id="temp-{{:tempId}}">

See the JsRender/JsViews documentation