JavaScript 我基于 CoffeeScript 做的一个 HTML 模板工具

jiyinyiyong · 2013年02月28日 · 2734 次阅读

因为想在 CoffeeScript 里直接生成 HTML, 又不想破坏语法的简洁 模板引擎虽然好,可前端做小东西时候还用不习惯 于是捣鼓出了一个模块,借助函数参数和 this 来形成语法:

lilyturf.html ->
  @div {class: "demo", id: "unique"},
    @div {class: "a"},
      @text: "string has no attributes"
    @div {class: "b"},
      @html: "html is string but not being escaped"
# above returns an HTML string

lilyturf.dom ->
  @div {class: "demo", id: "unique"},
    @div {class: "a"},
      @text: "string has no attributes"
    @div {class: "b"},
      @html: "html is string but not being escaped"
# this one returns a `<div>` DOM element.

另外支持一些简单的 for if 语句:

do test = ->
  lily = lilyturf
  log = -> console.log arguments...
  data =
    1: -> @div "test"
    2: -> "string"
    3: -> @div {}, "code"
    4: -> @div {id: "name"}, "code"
    5: -> @div {},
      if yes then @div "yes"
      if no then @div "no"
    6: -> @div {},
      @div "item #{i}" for i in [1,2,3,4]
      {class: "for loop"}
      undefined
    7: -> @div {},
      @div i for i in [1,2,3,4]

  for key, item of data
    log (lily.dom item)
    log (lily.html item)

内容在 Github: https://github.com/jiyinyiyong/lilyturf 目前只在 Chrome 上边玩..

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号