model-template-js v1.0.0

mt.js

mt.js is a minimalist javascript library for building html template. mt.js is based on MVC design pattern and contains basic jQuery method. Ideal for developing complex but lightweight web applications.

Installation

$ npm install model-template-js --save

Usage

<!--template.html-->
<div>
  <div class="mask"></div>
  <div class="dialog">
  <% if(typeof title === 'string'){ %>
         <div class="dialog__hd"><strong class="dialog__title"><%=title%></strong></div>
  <% } %>
  <div class="dialog__bd"><%=content%></div>
  <div class="dialog__ft">
  <% for(var i = 0; i < buttons.length; i++){ %>
      <a href="javascript:;" class="dialog__btn dialog__btn_<%=buttons[i]['type']%>"><%=buttons[i]['label']%></a>
  <% } %>
  </div>
  </div>
</div>

const $ = require('model-template-js')
const path = require('path')
const fs = require('fs')

let data = {
  titile: 'Question',
  content: 'Are you sure?',
  button: [{label: 'Yes'}, {label: 'No'}]
}

$('#div').render(fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8'), data)

Guide

A function for elements selection

If you use jQuery or zepto.js, you already know how to use mt.js

const buttons = $('.button')
buttons.addClass('disabled')

• append
• prepend
• remove
• find
• toggleClass
• addClass
• removeClass
• show
• hide
• toggle
• html
• css
• on
• off
• index
• offAll
• attr
• removeAttr
• data

A template engine

• $.render: render html template
• $.delegate: delegate html event
• $.encode: encode html
• $.decode: decode html

let $container = document.getElementById("container")
const itemFilter = (ele) => {
  return  ele.classList && ele.classList.contains("item")
}
const itemHander = (e) => {
  // ...
}
$container.addEventListener("click", $.delegate(itemFilter, itemHander))

Powered By

• balajs
• weui.js

License

MIT