@dinoreic/tag
HTML Tag builder
Last updated a year ago by dinoreic .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @dinoreic/tag 
SYNC missed versions from official npm registry.

HTML Widgets

Micro Widget/Component lib

Super simple component lib for use with server side rendered templates

if you need someting similar but more widely adopted, use https://stimulusjs.org/

Init interface

// to register a widget
Widget(name, { init: ..., render: ... })

// to bind widget to DOM node
Widget(name, HTMLElement)

// to get reference to binded node
Widget('#id' || HTMLElement)

instance public interface

methdods

// called only once on widget register
this.once()

// called on wiget init
this.init()

// will add css to document head if present
this.css()

// if it returns string, renders data to container
this.render()

// generate HTML tag
this.tag(name, otps, innerHTML)

// set @state[k]=v to v and call render() if render
this.set(key, value)defined

// set innerHTML to current node, auto call helpers. replaces $$ with current node reference
this.html(data, node?)

// binded DOM HTML Element
this.node      -

// this pointer as a string
this.refstring

// data-json="{...}" -> @state + all data-attributes are translated to state
this.state

Example code

Coffee script

Widget 'yes_no',
  css: """
    .w.yes_no button { margin: 0; }
  """

  init: ->
    @state.yes ||= 'yes'
    @state.no  ||= 'no'

  render: ->
    data  = @render_button(@state.yes, 1)
    data += @render_button(@state.no, 0)

    tag 'div.btn-group', data

  render_button: (name, state) ->
    klass = if parseInt(@state.state) == state then 'primary' else 'defaut'

    tag 'button.btn.btn-sm', name,
      class:   "btn-#{klass}"
      onclick: => @update_state(state)

  update_state: (state) ->
    url = "#{@state.object}/#{@state.id}/update?#{@state.field}="+state

    Api(url).done =>
      @state.state = state
      @render()
      Pjax.refresh()
<w-yes_no data-filed="yes" data-object="pools" data-id="3"></w-yes_no>

Current Tags

  • 0.1.0                                ...           latest (a year ago)

1 Versions

  • 0.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |