JSRender Helper 함수 예제

mirinae.maru

JSRender 템플릿으로 화면을 그릴때 표시할 데이터를 대문자로 바꾸거나, 소문자로 바꾸기, 문자열 바꾸기, 공백 제거 등이 필요할 경우가 있다. 이 경우에 Helper함수를 사용한다.

https://www.jsviews.com/#helpers

<!DOCTYPE html>
<!-- To run the current sample code in your own environment, copy this to an html page. -->

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://www.jsviews.com/download/jsrender.min.js"></script>
  <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />
</head>
<body>

<div id="person"></div>

<script id="personTemplate" type="text/x-jsrender">
  {{:~format(name, true)}} <br/>
  {{:~format(name)}} <br/>
  {{:~trim(title)}} <br/>
  {{:~replace(subject)}} <br/>
</script>

<script>

var myHelpers = {
  format: myFormatFunction,
  trim: myTrimFunction,
  replace: myReplaceFunction
};

function myFormatFunction(value, upper) {
  return upper ? value.toUpperCase() : value.toLowerCase();
}

function myTrimFunction(value) {
  return value.trim();
}

function myReplaceFunction(value) {
  return value.replace("클래스","class");
}

var data = {
  name: "Robert",
  title: " javascript는 클래스가 없는 프로토타입 기반의 언어이다.  ",
  subject: "javascript는 클래스가 없는 프로토타입 기반의 언어이다."
};

var html = $("#personTemplate").render(data, myHelpers); 

$("#person").html(html);

</script>

</body>
</html>