腾讯发布Omix1.0-用JSX或hyperscript创建用户界面

class Hello extends Omi.Component {
    render() {
        return <div> Hello {this.data.name}!</div>
 }
}

Omi.tag('hello', Hello)

class App extends Omi.Component {
 install() {
 this.name = 'Omi'
 }

 handleClick(e) {
 this.name = 'Omix' 
 this.update()
 }

 style() {
 return `h3{
 color:red;
 cursor: pointer;
 }`
 }

 render() {
 return <div>
 <hello name={this.name}>hello>
 <h3 onclick={this.handleClick.bind(this)}>Scoped css and event test! click me!</h3>
 div>
 }
}

Omi.render(new App(), '#container')

const $ = Omi.tags

class Hello extends Omi.Component {
    render() {
        return $.div( 'Hello' + this.data.name+'!')
    }
}

Omi.tag('hello-tag', Hello)

class App extends Omi.Component {
    handleClick(e) {
        alert(e.target.innerHTML)
    }

    render() {
        return $.div([
                $.HelloTag({name: 'Omi'}),
                $.h3({onclick: this.handleClick}, 'scoped css and event test! click me!')
            ])
    }
}

const $ = Omi.tags
$.tagName(selector)
$.tagName(attrs)
$.tagName(children)
$.tagName(attrs, children)
$.tagName(selector, children)
$.tagName(selector, attrs, children)

npm install omi-finger

import Omi from 'omix';
import 'omi-finger';

class App extends Omi.Component {
    handleTap(evt){
        this.refs.touchArea.innerHTML+='
Tap';
    }

    handleSwipe(evt){
        this.refs.touchArea.innerHTML+='
Swipe-'+ evt.direction;
    }

    render() {
        return  <div>
 <div omi-finger ref="touchArea" tap="handleTap" swipe="handleSwipe" >
 Tap or Swipe Me!
 </div>
 div>
 }
}

Omi.render(new App(),"#container");