代码拉取完成,页面将自动刷新
Write riotjs tags in a more oo-way with benefits of typescript
support typescript@2.4.2.
npm install -g typescript
npm install -g typings
npm install --save-dev riot-typed
install riot typed definitions
typings install -DG github:Joylei/riot-typed/src/riot.d.ts#2ca54b484694b133cbe6f58347242f6a1e273e17
install riot-typed typed definitions
typings install -DG github:Joylei/riot-typed/src/riot-typed.d.ts#2ca54b484694b133cbe6f58347242f6a1e273e17
let's define a tag
//file: tags/app.ts
import {tag, Tag} from 'riot-typed';
@tag('app', '<h1>{title}</h1>')
class App extends Tag<any>{
title:string;
constructor(){
this.title = 'Hello riot-typed!'
}
}
let's mount the tag
//file: main.ts
import 'tags/app';
riot.mount('app');
It's possible to override definition properties: tmpl|attrs|css.
//file: logger.ts
import {tag, Tag} from 'riot-typed';
@tag('logger',{ tmpl: '<p class="color" each="{ item in logs }">{ item }</p>', css: '.color{color:gray;}' })
export default class Logger extends Tag<any>{
logs: string[];
constructor(){
super();
this.logs = ['line 1', 'line 2'];
}
}
override css definition only:
//file: error-logger.ts
@tag('error-logger',{ css: 'error-logger .color{color:red;}' })
export default class ErrorLogger extends Logger{
constructor(){
super();
this.logs.push('!!!Error!!!');
}
}
please see examples for more information.
tag(tagName: string, tmpl?: string | { tmpl?: string, css?: string, attrs?: string })
please see riot.tag() for restrictions.
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。