Layui 템플릿 엔진을 사용하는 방법

layui에 대해 더 알고 싶다면 다음을 클릭하세요. layui tutorial#🎜 🎜 #

Laytpl은 문자 파싱 성능이 뛰어난 JavScript 템플릿 엔진이지만 예외 디버깅에 단점이 있습니다. 기존의 프론트엔드 템플릿 엔진의 인기가 떨어지기 때문에, 향후에laytpl을 다시 작성할 수도 있으며, 현재의 방향은 아직 결정되지 않았으며,layui가 비교적 안정된 후에 구현될 것으로 예상됩니다.

빠른 사용

일반적인 문자 스플라이싱과 달리laytpl의 템플릿은 데이터와 분리가 가능하므로 집중해서 사용하세요 특히 많은 수의 템플릿이 렌더링되는 상황에서 코드 유지 관리성을 향상시키기 위한 뷰 계층의 논리적 처리입니다.

layui.use('laytpl', function(){
     var laytpl = layui.laytpl;//直接解析字符
     laytpl('{{ d.name }}是一位公猿').render({
          name: '贤心'
          }, function(string){
              console.log(string); //贤心是一位公猿
        });
      //你也可以采用下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符
      var string =  laytpl('{{ d.name }}是一位公猿').render({
          name: '贤心'
       });
     console.log(string);  
     //贤心是一位公猿
     //如果模板较大，你也可以采用数据的写法，这样会比较直观一些
     laytpl([
         '{{ d.name }}是一位公猿',
         '其它字符 {{ d.content }}  其它字符'
         ].join(''))
      });

페이지나 다른 곳에 템플릿을 저장할 수도 있습니다.

//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
    <h3>{{ d.title }}</h3>
    <ul>{{#  layui.each(d.list, function(index, item){ }}
       <li>
          <span>{{ item.modname }}</span>
          <span>{{ item.alias }}：</span>
          <span>{{ item.site || &#39;&#39; }}</span>
        </li>
        {{#  }); }}{{#  if(d.list.length === 0){ }}无数据{{#  } }}</ul>
</script>
//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>
//第三步：渲染模版
var data = { //数据"title":"Layui常用模块","list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]}
var getTpl = demo.innerHTML,
view = document.getElementById(&#39;view&#39;);
laytpl(getTpl).render(data, function(html){view.innerHTML = html;});

템플릿 구문# 🎜🎜#

Grammar# 🎜🎜# {{ d.field }}html을 이스케이프하지 않고 일반 필드 출력

<div>{{ d.content }}</div>

# 🎜🎜 #일반 필드를 출력하고 html에서 탈출참고: 함수를 출력하려는 ​​경우 올바른 작성 방법은 다음과 같습니다. {{ fn() }}, 다음이 아님: {{# fn() }}#🎜 🎜#

{{#
var fn = function(){return '2017-08-18';
};
}}
{{#  if(true){ }}
开始日期：{{ fn() }}
{{#  } 
else { }}
已截止{{#  } }}

지정된 템플릿 영역을 필터링합니다. 즉, 이 영역의 템플릿은 파싱. 참고:layui 2.1.6이 추가되었습니다. 🎜🎜# 템플릿의 기본 {{ }} 구분 기호가 다른 템플릿(일반적으로 서버측 템플릿)과 충돌하는 경우 구분 기호를 재정의할 수도 있습니다:

<div> {{! 这里面的模板不会被解析  !}}</div>

# 🎜🎜#

설명	예
		{{= d.field }}
<h2>{{= d.title }}</h2>	# 🎜🎜## 🎜🎜#{{# JavaScript 표현식}}	JS 문. 일반적으로 논리 처리에 사용됩니다. 구분 기호로 시작하고 그 뒤에 # 기호가 옵니다.
	{{! template !}}
결론		Laytpl은 Layim, Table 등 Layui의 다양한 모듈에서 사용됩니다. 전통적인 프론트 엔드 템플릿 엔진의 인기가 줄어들었지만,laytpl은 여전히 ​​특정 역할을 수행할 수 있으므로 시도해 보십시오.

위 내용은 Layui 템플릿 엔진을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!