Omi 是一款用于创建用户界面的组件化框架
Omi 是一款用于创建用户界面的组件化框架,开放现代的Web组件化框架,故得名:Omi(Open and modern framework for building user interfaces)。 dntzhang released this
Assets
2
- [Add] Supports extractClass and classNames, → detail
Assets
2
- [Update] update omi.d.ts
Assets
2
- [Add] Supports static props: mergeUpdate
dntzhang released this
Assets
2
- [Add] Add a third parameter(oldProps) to receiveProps hook
dntzhang released this
Assets
2
- [Fix] fix host
- [Add] supports
defineElement
for amd env, it's the same asdefine
dntzhang released this
Assets
2
- [Fix] fix host
- [Add] supports
defineElement
for amd env, it's the same asdefine
Assets
2
- Made MVVM Simple.
dntzhang released this
Assets
2
- [Add] Supports receiveProps lifecycle method, when parent element re-render will trigger it.
dntzhang released this
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
dntzhang released this
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')
dntzhang released this
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");
dntzhang released this
Assets
2
v4.0.18 omi v4.0.18 - supports useCss
dntzhang released this
Assets
2
define('todo-list', function(props, data) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
)
})
dntzhang released this
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')
dntzhang released this
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')
dntzhang released this
Assets
2
- fix props.children
- supports getHost method
- supports cloneElement method
dntzhang released this
Assets
2
- pure element support
- props.childrens support
- beforeRender of lifecycle support
dntzhang released this
Assets
2
- use textContent instead of innerText to avoid
creations - add afterInstall hook
- update omi.d.ts
Watchers:270 |
Star:7085 |
Fork:609 |
创建时间: 2015-05-31 22:24:58 |
最后Commits: 昨天 |
许可协议:View license |
分类:MVC框架和UI库 / JavaScript开发 |
收录时间:2017-02-14 14:53:17 |
cc175e1
[Fix] You can call
this.update
in the updated method.082d999#diff-b450ec58fb342d5ff26c1bd3dad541b1R100