All Projects → ghy511024 → shtm

ghy511024 / shtm

Licence: other
No description or website provided.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to shtm

SlipperyLayout
A layout that supports sliding.
Stars: ✭ 44 (+109.52%)
Mutual labels:  view
ColumbusEngine
3D cross-platform game engine written in C++
Stars: ✭ 45 (+114.29%)
Mutual labels:  engine
sdl2-raycast
SDL2 C++ raycasting engine with vertical movement, floor/ceiling texture mapping and sprites.
Stars: ✭ 80 (+280.95%)
Mutual labels:  engine
kyoto
Golang SSR-first Frontend Library
Stars: ✭ 543 (+2485.71%)
Mutual labels:  view
ue4-kopiarka
This is a little util that lets me copy and rename projects from one directory to another
Stars: ✭ 24 (+14.29%)
Mutual labels:  engine
cursive-tabs
Tabs for gyscos/cursive views 🖥️
Stars: ✭ 21 (+0%)
Mutual labels:  view
view-admin-as
View the WordPress admin as a different role, switch between users, temporarily change your capabilities, set default screen settings for roles, manage your roles and capabilities.
Stars: ✭ 44 (+109.52%)
Mutual labels:  view
Squirrel-Engine
Multithreaded C/C++ Game Engine
Stars: ✭ 90 (+328.57%)
Mutual labels:  engine
mine.js
🌏 A voxel engine built with JS/TS/RS. (formerly mc.js) (maybe mine.ts? or even mine.rs?)
Stars: ✭ 282 (+1242.86%)
Mutual labels:  engine
drag-to-close
Android library that provides a view group which allows to finish an activity by dragging a view.
Stars: ✭ 69 (+228.57%)
Mutual labels:  view
ShadowDrawable
为View 和 ViewGroup 添加阴影效果--Android,Add shadow for single view or viewgroup layout.
Stars: ✭ 22 (+4.76%)
Mutual labels:  view
quickjs-build
Build for QuickJS JavaScript Engine
Stars: ✭ 25 (+19.05%)
Mutual labels:  engine
DummyEngine
Small cross platform Vulkan/OpenGL 3d engine for personal experimentation
Stars: ✭ 76 (+261.9%)
Mutual labels:  engine
pyEnigma
Python Enigma cypher machine simulator.
Stars: ✭ 44 (+109.52%)
Mutual labels:  engine
crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (+4.76%)
Mutual labels:  view
colony
Implementation of the colony specification for python
Stars: ✭ 23 (+9.52%)
Mutual labels:  engine
Video-Engine-Dash
A Dash plugin for playing back video and optionally syncing video to timestamped CSV Data
Stars: ✭ 26 (+23.81%)
Mutual labels:  engine
loco-rails
Rails is awesome, but modern web needs Loco-motive.
Stars: ✭ 53 (+152.38%)
Mutual labels:  engine
pixi-miniprogram
一个可运行于微信小程序的PIXI引擎,通过模拟window环境,有些功能小程序无法模拟,就直接修改了PIXI引擎代码,最终使得PIXI引擎正常运行在小程序上
Stars: ✭ 72 (+242.86%)
Mutual labels:  engine
unocss
The instant on-demand atomic CSS engine.
Stars: ✭ 7,866 (+37357.14%)
Mutual labels:  engine

Build Status Coverage Status

shtm.js

A node template engine based on Java JSTL

Install

npm install shtm

Use in express

  • set engine

Using shtm as the default view engine requires just one line of code in your app setup. This will render .shtm files when res.render is called.

app.set ('views', path.join (__dirname, 'views'));
app.set('view engine', 'shtm');

To use a different extension (i.e. html) for your template files:

app.set ('views', path.join (__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require('shtm').__express);
  • use engine
app.get('/home', function (req, res) {
  res.render('home', { title: 'Hello shtm!'});
});

The template (i.e. home.shtm)

├─views
│   └─home.shtm
└─package.json
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shtm</title>
</head>
<body>
    message:${title}
</body>
</html>

Normal

var data = {
    a: 1,
    b: { x1: 1 },
    c: { key: "x1" }
}
<span>${a}</span>
<span>${b.x1}</span>
<span>${b[c.key]}</span>

If

  • app.js
app.get('/home', function (req, res) {
  res.render('home', { test1: true, test2: false, test3: 1 });
});
  • home.shtm
<c:if test="${test1}">t1</c:if>                 //true
<c:if test="${test2}">t2</c:if>                 //false
<c:if test="${test1&&test2}">t3</c:if>          //false
<c:if test="${test1||test2}">t4</c:if>          //true
<c:if test="${test3}">t5</c:if>                 //false
<c:if test="${'xixihaha'}">t6</c:if>            //false
<c:if test="${'xixihaha'.length>0}">t7</c:if>   //true

ForEach

 app.get('/home', function (req, res) {
    var data = {
            list: [{name: "lilei"},{name: "hanmeimei"}],
            maps: {key1, "value1", key2: "value2"},
            str: "key1,key2,key3"
        }
     res.render('home', data);
});
    
  • foreach arraylist
    <c:forEach items="${list}" var="item">
        <span>
            <span>arrItem:${item}</span>
        </span>
    </c:forEach>
  • foreach map
    <c:forEach items="${maps}" var="item">
         <span>
             <span>map forEach:${item.key}:${item.value}</span>
         </span>
    </c:forEach>
  • foreach string
    <c:forEach items="${str}" var="item">
          <span>
             <span>string forEach: ${item}</span>
          </span>
    </c:forEach>
  • foreach "begin && end && index"
<ul>
    <c:forEach  begin="0" end="3" index="index">
        <li>${index}</li>       
    </c:forEach>
<ul>

==================out============
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Foreach nesting

 app.get('/home', function (req, res) {
    var data={
        list:[
            {name:"lilei",list2:[1,2,3]},
            {name:"hanmeimei",list2:[4,5,6]}
        ]
     }
    res.render('home', data);
});
    
  • home.shtm
    <c:forEach items="${list}" var="item">
          <p>name:${item.name}</p>
          <c:forEach items="${item.list2}" var="val">
                <span>${val}</span>
           </c:forEach>
    </c:forEach>

include

├─common
│  └─header.shtm
└─page
    ├─page1.shtm
    ├─child.shtm
  • page1.shtm
<c:include page="../common/header.shtm"></c:include>

<div class="main">
    <c:include page="child.shtm"></c:include>
</div>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].