Bot releases are hidden (Show)
Published by dntzhang about 5 years ago
static use
has been removed, please use use
Published by dntzhang about 5 years ago
usingSelf
errorPublished by dntzhang about 5 years ago
observe
, tick
and nextTick
from omithis.data
from instance of componentPublished by dntzhang about 5 years ago
useSelf
to store system, update self only, exclude children components, for example:define('my-app', class extends WeElement {
useSelf() {
return ['msg']
}
render() {
return (
<div>
<span onClick={this.store.random}>{this.store.data.msg}</span>
<my-counter />
</div>
)
}
})
render(
<my-app />,
'body',
new class Store {
data = {
msg: 'aaa',
count: 0
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
random = () => {
this.data.msg = Math.random()
}
}()
)
Published by dntzhang about 5 years ago
updateSelf
method to the instance of componentPublished by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Add the fourth parameter to define method, can configure CSS and lifecycle functions.
import { render, define } from 'omi'
class Store {
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
}
define('my-counter', ['count'], _ => (
<div>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
</div>
), {
css: `span { color: red; }`,
installed() {
console.log('installed')
}
})
render(<my-counter />, 'body', new Store)
Published by dntzhang about 5 years ago
New functional styel API:
import { define, render } from 'omi'
class Store {
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
}
define('my-counter', ['count'], _ => (
<div>
<button onClick={_.store.sub}>-</button>
<span>{_.store.data.count}</span>
<button onClick={_.store.add}>+</button>
</div>
))
render(<my-counter />, 'body', new Store)
The second parameter of define
is optional.
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
fire
method of element case sensitivePublished by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
New syntax, prop supports reading prop from data center -
Omi.$
Define element:
import { define, WeElement } from 'omi'
define('my-ele', class extends WeElement {
static propTypes = {
user: Object
}
render(props) {
return (
<div>name: {props.user.name}, age: {props.user.age}</div>
)
}
})
Using Element in others framework or pure js:
<script>
Omi.$.user = { name: 'dntzhang', age: 18 }
</script>
<my-ele user=":user" ></my-ele>
Also supports path:
<other-ele age=":user.age" ></other-ele>
Published by dntzhang about 5 years ago
Published by dntzhang about 5 years ago
Published by dntzhang over 5 years ago
Published by dntzhang over 5 years ago