Omi 是一款用于创建用户界面的组件化框架
Omi 是一款用于创建用户界面的组件化框架，开放现代的Web组件化框架，故得名：Omi（Open and modern framework for building user interfaces）。
Assets
2
- [Add] Supports static props: mergeUpdate
Assets
2
- [Add] Add a third parameter(oldProps) to receiveProps hook
Assets
2
- [Fix] fix host
- [Add] supports
defineElementfor amd env, it's the same asdefine
Assets
2
- [Fix] fix host
- [Add] supports
defineElementfor amd env, it's the same asdefine
Assets
2
- Made MVVM Simple.
Assets
2
- [Add] Supports receiveProps lifecycle method, when parent element re-render will trigger it.
Assets
2
- [Fix] Solving Recursive update problem
Before this version, it will lead to infinite recursion by this way:
beforeRender() {
this.data.a = { b: 1 }
}
or
render() {
this.data.b = Math.random()
...
}
It's fixed now! It's not infinite recursion.
Assets
2
- [Fix] fix array splice proxy problem
Assets
2
import { render, WeElement, define, rpx } from 'omi'
define('my-counter', class extends WeElement {
static observe = true
css() {
return rpx(`div { font-size: 375rpx }`)
}
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
render() {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{this.data.count}</span>
<button onClick={this.add}>+</button>
</div>
)
}
})
render(<my-counter />, 'body')
Assets
2
- [Add] native tap event support
import { render, WeElement, define } from "omi"
define("my-app", class extends WeElement {
onTap = () => {
console.log('tap')
}
render() {
return (
<div onTap={this.onTap}>Tap Me!</div>
)
}
})
render(<my-app />, "body");
Assets
2
v4.0.18 omi v4.0.18 - supports useCss
Assets
2
define('todo-list', function(props, data) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
)
})
Assets
2
https://github.com/Tencent/omi/blob/master/packages/omi/src/observe.js#L14-L20
It should be noted that if observe is used, do not set the value of data in some of the following functions: some complex objects such as obj or arr:
- render
- beforeRender
- beforeUpdate
- afterUpdate
Because data settings will simply compare the value before and after, complex objects will not be deep contrast, the contrast value will trigger different update, update will trigger the above function, infinite recursion.
But you set the property of data as a simple value type（string, number, bool ...）in those functions.
Assets
2
import { define, render } from 'omi'
define('my-counter', function() {
const [count, setCount] = this.useData(0)
return (
<div>
<button onClick={() => setCount(count - 1)}>-</button>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
})
render(<my-counter />, 'body')
Assets
2
import { render, WeElement, define } from 'omi'
define('my-counter', class extends WeElement {
static observe = true
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
render() {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{this.data.count}</span>
<button onClick={this.add}>+</button>
</div>
)
}
})
render(<my-counter />, 'body')
Assets
2
- fix props.children
- supports getHost method
- supports cloneElement method
Assets
2
- pure element support
- props.childrens support
- beforeRender of lifecycle support
Assets
2
- use textContent instead of innerText to avoid
creations - add afterInstall hook
- update omi.d.ts
| Watchers：261 |
| Star：6473 |
| Fork：548 |
| 创建时间： 2015-05-31 22:24:58 |
| 最后Commits： 昨天 |
| 分类：MVC框架和UI库 / JavaScript开发 |
| 收录时间：2017-02-14 14:53:17 |
94a491a[Update] rename
__elementIdtoelementId