Nautil is a javascri【作者:唐霜】转载请注明出处:www.tangshuang.netpt framework based o转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。n React which is a m【未经授权禁止转载】【转载请注明来源】odern reactive UI li著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】brary. In the ecosys【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】tem of react, develo转载请注明出处:www.tangshuang.net原创内容,盗版必究。pers are always foll【作者:唐霜】【作者:唐霜】owing Flux architect未经授权,禁止复制转载。【作者:唐霜】ure.
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【未经授权禁止转载】However, its not eas【版权所有,侵权必究】【本文首发于唐霜的博客】y to write applicati【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】on level code with r【作者:唐霜】未经授权,禁止复制转载。eact. Even though we本文作者:唐霜,转载请注明出处。【转载请注明来源】 have redux and many【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。 third libraries, we【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net still should have t【本文受版权保护】【版权所有】唐霜 www.tangshuang.neto waste much time on【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 resolving code orga【作者:唐霜】【版权所有】唐霜 www.tangshuang.netnization.
未经授权,禁止复制转载。【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netTo make it easy to u【本文首发于唐霜的博客】【作者:唐霜】se react syntax to c【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netreate applications, 转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。I wrote a js framewo著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。rk which called Naut未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。il. It is much diffe【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netrence from native re未经授权,禁止复制转载。【转载请注明来源】act development.
【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。Now, follow me to ha未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ve a glance of what 原创内容,盗版必究。【原创内容,转载请注明出处】Nautil provides.
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net1. Observer
The whole framework 未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】is built on the idea本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 of Observer Pattern未经授权,禁止复制转载。【未经授权禁止转载】. This help develope本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。rs write less code t【转载请注明来源】【转载请注明来源】o implement reactive【版权所有,侵权必究】【原创不易,请尊重版权】 system. For example【作者:唐霜】【本文首发于唐霜的博客】:
【本文首发于唐霜的博客】【作者:唐霜】【本文受版权保护】import { Component, Store } from 'nautil'
import { Observer, Text } from 'nautil/components'
const store = new Store({ age: 10 })
class SomeComponent extends Component {
render() {
return (
<Observer
subscribe={dispatch => store.watch('age', dispatch)}
unsubscribe={dispatch => store.unwatch('age', dispatch)}
dispatch={this.update}
>
<Text>{store.state.age}</Text>
</Observer>
)
}
}
// in some place, even outside the file by exporting `store` store.state.age = 20
Here we use a Observer component to wrap s【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。ub-components, and w原创内容,盗版必究。未经授权,禁止复制转载。hen its dispatch is invoked, the com著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ponent will rerender【转载请注明来源】【作者:唐霜】. By using Observer component, we can w原创内容,盗版必究。【本文首发于唐霜的博客】rite reactive code m【转载请注明来源】本文作者:唐霜,转载请注明出处。ore interesting, any【转载请注明来源】【版权所有,侵权必究】 responsive object c【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netan be used in react.
2. Store
It is too complex by原创内容,盗版必究。转载请注明出处:www.tangshuang.net using redux, why sh【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ould we write so man【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.nety codes which is not【转载请注明来源】本文作者:唐霜,转载请注明出处。 about our business?【未经授权禁止转载】未经授权,禁止复制转载。 Nautil provides a i【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】nner Store which is 【作者:唐霜】【原创内容,转载请注明出处】very easy to define,原创内容,盗版必究。【原创内容,转载请注明出处】 and use like vue da【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】ta.
原创内容,盗版必究。原创内容,盗版必究。import { Store } from 'nautil'
const store = new Store({
name: 'tomy',
age: 10,
})
Use api to get and s【未经授权禁止转载】转载请注明出处:www.tangshuang.netet data:
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【原创不易,请尊重版权】【本文首发于唐霜的博客】const name = store.get('name')
store.set('name', 'sunny')
However, to more sen本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】se way is to use state:
const { state } = store
const name = state.name
state.name = 'sunny'
To worker with Observer, store can be watch著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.neted so that rerender 本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】the UI when data cha转载请注明出处:www.tangshuang.net【版权所有,侵权必究】nged.
const WatchedComponent = observe(store)(OriginComponent)
The WatchedComponent is reactive of stor未经授权,禁止复制转载。【本文受版权保护】e, so when the data 本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】changed in store, it原创内容,盗版必究。【未经授权禁止转载】 will rerender UI.
3. Two-Way-Binding
With the ability of 著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】Observer, I build up转载请注明出处:www.tangshuang.net原创内容,盗版必究。 a two-way-binding s原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。ystem. Yes, you can 【作者:唐霜】【版权所有】唐霜 www.tangshuang.netuse two-way-binding 【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】in react too.
【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【转载请注明来源】import { Component } from 'nautil'
import { Input } from 'nautil/components'
class EditComponent extends Component {
state = {
name: '',
}
render() {
return (
<Input $value={[this.state.name, name => this.setState({ name })]} />
)
}
}
The property $value which begin with $ is a two-way-bindin本文作者:唐霜,转载请注明出处。原创内容,盗版必究。g property. It recei【原创内容,转载请注明出处】【原创不易,请尊重版权】ve an array which co【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ntains two item. The【未经授权禁止转载】【转载请注明来源】 second item is a fu原创内容,盗版必究。【转载请注明来源】nction which is to u原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netpdate the value.
By using createTwoWayBinding and Store, it very easy to wr未经授权,禁止复制转载。【本文受版权保护】ite beautiful codes.
import { Component, Store } from 'nautil'
import { Input } from 'nautil/components'
import { inject, observe, pipe } from 'nautil/operators'
class EditComponent extends Component {
render() {
return (
<Input $value={this.attrs.binding.name} />
)
}
}
const store = new Store({ name: '' })
const binding = createTwoWayBinding(store.state)
export default pipe([
inject('binding', binding),
observe(store),
])(EditComponent)
We use createTwoWayBinding to create a proxied【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net object. When we inv【原创不易,请尊重版权】未经授权,禁止复制转载。oke state.name, we will get a stru【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。ctured array.
And it is very easy 【版权所有,侵权必究】【作者:唐霜】and interesting to u本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】se two-way-binding p著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。roperty inside compo【本文受版权保护】【未经授权禁止转载】nent. If I want to c转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】reate a component li著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ke following:
未经授权,禁止复制转载。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。<Swither $open={binding.open} />
We can easily write 本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。in the component:
【本文首发于唐霜的博客】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。class Swither extends Component {
onToggle() {
this.attrs.open = !this.attrs.open
}
}
I do not need to wri【原创不易,请尊重版权】转载请注明出处:www.tangshuang.nette a lot of callback【版权所有,侵权必究】【原创不易,请尊重版权】 functions, just cha【转载请注明来源】【作者:唐霜】nge the this.attrs.open. Isn’t it int【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】eresting?
4. operators
If you have used rea原创内容,盗版必究。未经授权,禁止复制转载。ct-redux, you will k【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.netnow how to use connect function to wrap a 未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。component. In Nautil未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。, operators are func原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.nettions to create wrap【本文首发于唐霜的博客】【转载请注明来源】 function.
In Nautil, operators本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。 are much more power【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。ful than redux conne转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ct.
【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【本文首发于唐霜的博客】– observe: sho未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netrt for Observer
转载请注明出处:www.tangshuang.net
– inject: pen原创内容,盗版必究。未经授权,禁止复制转载。d a new prop
【未经授权禁止转载】
– connect: in【未经授权禁止转载】【原创内容,转载请注明出处】ject ReactConext int著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.neto a prop
【转载请注明来源】
– pollute: ch未经授权,禁止复制转载。【未经授权禁止转载】ange sub-components&著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。#8217; defaultProps 【版权所有,侵权必究】【本文受版权保护】in runtime of curren【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】t component
未经授权,禁止复制转载。
– scrawl: cha【本文受版权保护】【作者:唐霜】nge sub-components本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】8217; defaultStylesh【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。eet in runtime
– pipe: combin【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】e operators
著作权归作者所有,禁止商业用途转载。
– multiple: u【原创内容,转载请注明出处】未经授权,禁止复制转载。se batch operator pa原创内容,盗版必究。原创内容,盗版必究。rameters one time
Especially in an app【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。lication, we would w【本文受版权保护】【转载请注明来源】ant to bypass some p【作者:唐霜】【作者:唐霜】rops, well, pollute operator is a magic【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net. For example, you w【转载请注明来源】【关注微信公众号:wwwtangshuangnet】ant to inject some c未经授权,禁止复制转载。【版权所有,侵权必究】omponent with an obj未经授权,禁止复制转载。【本文受版权保护】ect globally:
class App extends Component {
render() {
...
}
}
const pollutedProps = { store }
export default pipe([
multiple(pollute, [
[ComponentA, pollutedProps],
[ComponentB, pollutedProps],
[ComponentC, pollutedProps],
]),
observe(store),
])(App)
Using the previous c转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netode, your App will b本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】e reactive for store and the given sub-d未经授权,禁止复制转载。【作者:唐霜】eep-components insid【作者:唐霜】本文版权归作者所有,未经授权不得转载。e App will auto be p原创内容,盗版必究。【转载请注明来源】atched with store pr【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】op.
5. Depository
To request data from【本文受版权保护】【关注微信公众号:wwwtangshuangnet】 backend, yep, use a【转载请注明来源】【关注微信公众号:wwwtangshuangnet】jax. But in fact, we转载请注明出处:www.tangshuang.net【本文受版权保护】 do not need to writ本文作者:唐霜,转载请注明出处。【未经授权禁止转载】e ajax code in your 【本文受版权保护】【转载请注明来源】project. Depository 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。is the one to help y【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。ou throw away ajax.
【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】【本文首发于唐霜的博客】【转载请注明来源】It is an abstract of【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net data request, you n【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neteed to know one core本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 concepts: data sour本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。ce. A data source is著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。 a configuration for本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。 data request, and u【转载请注明来源】原创内容,盗版必究。se the id to get dat著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】a from depository wi转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。thout ajax code.
【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netimport { Depository } from 'nautil'
const depo = new Depository({
name: 'depo_name',
baseURL: '/api/v2',
sources: [
{
id: 'some',
path: '/some',
method: 'get',
},
],
})
I defined a data sou【本文受版权保护】【本文受版权保护】rce ‘some̵【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】7; in the depository本文作者:唐霜,转载请注明出处。【作者:唐霜】 ‘depo_name未经授权,禁止复制转载。【转载请注明来源】217;, and then I can原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net request the data by【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net:
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】const data = depo.get('some') // get data from depo cache
depo.request('some').then(data => console.log(data)) // request data from backend in a Promise
.get is different from .request, it do not request 【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。data from backend im【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。mediately, it reques本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】t data from local ca【原创不易,请尊重版权】【版权所有,侵权必究】che first, so it is 本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】synchronous. Working【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。 with observe:
class SomeComponent extends Component {
render() {
const { depo } = this.attrs
const some = depo.get('some')
return (
<Prepare isReady={some} loading={<Text>loading...</Text>}>
{() => <Text>{some.name}</Text>}
</Prepare>
)
}
}
export default pipe([
inject('depo', depo),
observe(dispatch => depo.subscribe('some', dispatch), dispatch => depo.unsubscribe('some', dispatch)),
])(SomeComponent)
You do not need to s著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。end ajax in this cod【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。e, depository will d转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.neto it for you inside.【原创不易,请尊重版权】【未经授权禁止转载】 Because of subscribe to depo, the UI wil本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】l rereender automati【原创不易,请尊重版权】【本文首发于唐霜的博客】cally.
6. Stylesheet
Nautil component wil【作者:唐霜】【本文受版权保护】l parse stylesheet automatically to be未经授权,禁止复制转载。未经授权,禁止复制转载。 used in different p【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】latform.
<Section stylesheet={'className'}></Section> ## string
<Section stylesheet={{ className: this.state.name === 'tomy' }}></Section> ## object with boolean value
<Section stylesheet={{ color: 'red', width: 120, height: 90 }}></Section> ## style object in react
<Section stylesheet={['className', { otherClass: this.state.boolean }, { color: 'blue', fontSize: 14 }]}></Section> ## mix array
Especially, when you【作者:唐霜】【原创不易,请尊重版权】 set transform style, you do not n原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.neteed to worry about r【转载请注明来源】【作者:唐霜】eact-native parsing,【作者:唐霜】本文版权归作者所有,未经授权不得转载。 Nautil will do it a【关注微信公众号:wwwtangshuangnet】【转载请注明来源】utomatically.
<Section stylesheet={{ transform: 'translateX(-5px)' }}></Section>
7. cross-platform
One of Nautil’著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】s goals is to build 【原创不易,请尊重版权】【原创内容,转载请注明出处】cross-platform appli本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】cations. Currently, 【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netnautil support the f【本文受版权保护】本文作者:唐霜,转载请注明出处。ollowing platforms: 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netweb, web-mobile, web著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】-component (h5-app),转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。 react-native (ios, 原创内容,盗版必究。转载请注明出处:www.tangshuang.netandriod), miniapp (w本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netechat-app, others us【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】e antmove to transfo本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netrm).
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。I have create a CLI 本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】tool nautil-cli, which can helop de未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netvelopers to start th著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。eir nautil applicati原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。on more easy.
【本文受版权保护】未经授权,禁止复制转载。【原创内容,转载请注明出处】This is the real tim【版权所有,侵权必究】【本文首发于唐霜的博客】e to Write one, Run anywh本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。ere. Clone nautil-demo for playing.
【原创不易,请尊重版权】【未经授权禁止转载】未经授权,禁止复制转载。【本文受版权保护】8. Stream
Different from react原创内容,盗版必究。原创内容,盗版必究。 event system, Nauit本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netl allow developers t【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.neto use rxjs in their 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】event, the events ha【作者:唐霜】【关注微信公众号:wwwtangshuangnet】ndler functions can 【转载请注明来源】【原创内容,转载请注明出处】be normal handler fu【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。nction to receive ca【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。llback parameters. O【原创不易,请尊重版权】未经授权,禁止复制转载。r it can be observab本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netle stream pipe opera【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。tors.
本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【原创内容,转载请注明出处】【本文受版权保护】<SomeComponent onHint={[map(e => e.target.value * 2), value => this.setState({ value })]}></SomeComponent>
In the previous code【原创内容,转载请注明出处】未经授权,禁止复制转载。, the first item is 本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。a rxjs pipe operator【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。, and the latest ite【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】m in the array is onHint callback function w【本文首发于唐霜的博客】【本文首发于唐霜的博客】hich receive the str【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。eam output.
In the component, de【作者:唐霜】未经授权,禁止复制转载。velopers can use this.onHint$ to operate onHint e转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。vent stream.
class SomeComponent extends Component {
onDigested() {
this.onHint$.subscribe((value) => {
// you can subscribe on the stream when digested
// so that, you do not need to write a wrapper handle
})
}
handle(e) {
this.onHint$.next(e)
}
}
9. Model
Modern frontend appl【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.netications are always 本文作者:唐霜,转载请注明出处。【未经授权禁止转载】struggling with data【未经授权禁止转载】【作者:唐霜】. Nautil provide a M著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】odel to control data【版权所有】唐霜 www.tangshuang.net【本文受版权保护】 for some necessary 【转载请注明来源】本文版权归作者所有,未经授权不得转载。place, for example, 【本文受版权保护】【本文受版权保护】in a form.
【版权所有,侵权必究】【转载请注明来源】Model is a very stro【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ng data type control【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ler, which is based 【版权所有,侵权必究】【本文受版权保护】on a Schema system.
原创内容,盗版必究。【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】import { Model } from 'nautil'
import { Natural } from 'nautil/types'
class PersonModel extends Model {
schema() {
return {
name: {
type: String,
default: '',
validators: [
{
validate: value => value && value.length > 6,
message: 'name should must longer than 6 letters.',
},
],
},
age: {
type: Natural,
default: 0,
get: value => value + '', // convert to be a string when get
set: value => +value, // convert to be a number when save into model
},
}
}
}
const model = new PersonModel() // you can set default value here const state = model.state // the same usage as Store
The model instance i【未经授权禁止转载】【未经授权禁止转载】s very sensitive wit【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】h data type. When yo本文作者:唐霜,转载请注明出处。原创内容,盗版必究。u set a un-checked v【本文受版权保护】未经授权,禁止复制转载。alue into it, it may转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net not accept the valu【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】e because of data ch原创内容,盗版必究。原创内容,盗版必究。ecking fail.
未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】【原创不易,请尊重版权】On the other hand, t【作者:唐霜】本文版权归作者所有,未经授权不得转载。he validators formulators are very useful in 原创内容,盗版必究。【作者:唐霜】form, for example va原创内容,盗版必究。【本文受版权保护】lidate in runtime:
<Section><Input $value={[state.name, name => state.name = name]} /></Section>
{model.message('name') ? <Section stylesheet="error-message">{model.message('name')}</Section> : null}
And Model instance i著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。s observable too, so本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。 you can use it with observe operator in your co【原创不易,请尊重版权】【本文受版权保护】mponent.
export default pipe([
initialize('person', PersonModel),
observe('person'),
])(SomeComponent)
Read more from my bl【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。og to taste Model.
【本文受版权保护】原创内容,盗版必究。【本文受版权保护】未经授权,禁止复制转载。10. Props Statement
Although you can use【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】 prop-types to check【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。 data type in react,【转载请注明来源】【本文首发于唐霜的博客】 Nautil provides a m转载请注明出处:www.tangshuang.net【转载请注明来源】ore sensitive type c【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。hecking system based本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】 on tyshemo, which can check de【本文受版权保护】原创内容,盗版必究。ep nested object eas转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。ily.
【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】class SomeComponent extends Component {
static props = {
source: {
name: String,
books: [
{
name: String,
price: Positive,
},
],
},
}
}
It is very intuitive原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。, without any unders【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nettanding. However, it原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 is compatible with 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】prop-types, so that 转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】all react components【转载请注明来源】本文作者:唐霜,转载请注明出处。 can be used in Naut【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】il system.
著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netThese are what Nauti转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。l bring up which are原创内容,盗版必究。【本文受版权保护】 different from reac原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。t development. It he【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netlp developers write 【作者:唐霜】著作权归作者所有,禁止商业用途转载。less code and make c【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netode structure more c【原创内容,转载请注明出处】原创内容,盗版必究。lear. If you are tir转载请注明出处:www.tangshuang.net【本文受版权保护】ed with complex scat【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.nettered react ecology 【作者:唐霜】原创内容,盗版必究。libraries, have a tr著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。y with Nautil.
未经授权,禁止复制转载。【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netThe next step of Nau原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。til is to make a UI 转载请注明出处:www.tangshuang.net原创内容,盗版必究。framework which can 【作者:唐霜】【原创内容,转载请注明出处】run cross-platform. 本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。If you a interested 未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。in this project, wel【本文首发于唐霜的博客】【原创内容,转载请注明出处】come to join me on github.
转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。2019-10-13 3049


