数据响应式前端模板引擎

kgm-template 是一个数据响应式的前端 (Javascript) 模板引擎，使用 NT 可以使你的代码实现数据和视图模型的分离(MVC)。

码云地址

https://gitee.com/kgm0515/kgm-template

标签的方式引入

<script type="text/javascript" src="kgm-template.min.js></script>

ES6中使用

安装插件： npm i kgm-template

使用方式1: 数据响应式，自动渲染

创建实例，传入模板、数据、方法等，方法可以调用修改data中的数据，页面随着data修改实时刷新

import Template from 'kgm-template'
// 自动解析处理和缓存模板，绑定数据和函数
new Template({ 
  regConfig = null,      // 正则配置
  namespace = 'default', // 命名空间
  template = '',          // 模板
  rootId = '',             // 父元素id
  rootDom = null,         // 元素节点
  data= {},               // 绑定的数据
  methods ={},            // 方法
  components = {},        // 内部组件实例
})

使用方式2: 仅编译，需要手动渲染

仅编译模版暂不渲染，它会返回一个html节点字符串.

import Template from 'kgm-template'

const instance = Template.getInstance({})
let html = instance.compile(tpl, data);
// 渲染
document.getElementById('app').innerHTML = HTML

自定义模板语法边界符

变量正则： /{{([\s\S]+?)}}/g

<!-- 绑定变量 -->
<h3>{{info.name}}\</h3>

<!-- 三元表达式 -->
<h3>{{info.age >  ? "已成年": "未成年"}}\</h3>
<button>{{ !content[i].edit ? "编辑": "保存" }}</button>

js表达式正则： /<%([\s\S]+?)%>/g

<!-- 判断 -->
<% if(descript){ %> 
   <div>{{descript}}</div> 
<% }else{ %> 
     <div> 暂无描述</div> 
<% } %>

<!-- 循环 -->
<%  for(let i = 0; i<content.length; i++){ %>
  <li>
    <% if(content[i].edit){ %>
      <b>{{content[i].text}}</b> 
    <% }else{ %>
      <b>{{content[i].text}}</b> 
    <% } %>
  </li>
<% } %>

注释正则：/<!--([\s\S]+?)-->/g

<!-- 注释节点 -->

绑定方法：@事件名: @事件名="

<!-- 绑定点击事件 -->
<button @click="deleteItem(event, {{i}})">保存</button>

<!-- 绑定输入事件 -->
<input value="{{content[i].text}}" @input="modifyContent(this, ///'{{item}}///'" />