Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
/dobPublic

Commitb09a812

Browse files
committed
update dingding
1 parent087c948 commitb09a812

File tree

2 files changed

+82
-62
lines changed

2 files changed

+82
-62
lines changed

‎demos/action/index.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import{Action,combineStores,globalState,inject,isObservable,observable,observe}from"../../src"
1+
import{
2+
Action,
3+
combineStores,
4+
globalState,
5+
inject,
6+
isObservable,
7+
observable,
8+
observe
9+
}from"../../src"
210

311
@observable
412
classStore1{
@@ -8,7 +16,8 @@ class Store1 {
816
classAction1{
917
@inject(Store1)privateStore1:Store1
1018

11-
@Actionpublictest1(){
19+
@Action
20+
publictest1(){
1221
this.Store1.age=2
1322
}
1423
}

‎readme.md‎

Lines changed: 71 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -20,50 +20,53 @@
2020
There are some[demo](https://jsfiddle.net/1q772uL0/20/) on fiddle. Here's the simplest:
2121

2222
```typescript
23-
import {observable,observe }from"dob"
23+
import {observable,observe }from"dob";
2424

25-
const obj=observable({ a:1 })
25+
const obj=observable({ a:1 });
2626

2727
observe(()=> {
28-
console.log("obj.a has changed to",obj.a)
29-
})// <· obj.a has changed to 1
28+
console.log("obj.a has changed to",obj.a);
29+
});// <· obj.a has changed to 1
3030

31-
obj.a=2// <· obj.a has changed to 2
31+
obj.a=2;// <· obj.a has changed to 2
3232
```
3333

3434
You can enjoy the benefits of proxy, for example`obj.a = { b: 5 }` is effective.
3535

3636
##Use in react component
3737

3838
```typescript
39-
import {Action,observable,combineStores,inject }from'dob'
40-
import {Connect }from'dob-react'
39+
import {Action,observable,combineStores,inject }from"dob";
40+
import {Connect }from"dob-react";
4141

4242
@observable
4343
exportclassUserStore {
44-
name='bob'
44+
name="bob";
4545
}
4646

4747
exportclassUserAction {
48-
@inject(UserStore) UserStore:UserStore;
48+
@inject(UserStore) UserStore:UserStore;
4949

50-
@Action setName () {
51-
this.store.name='lucy'
52-
}
50+
@Action
51+
setName() {
52+
this.store.name="lucy";
53+
}
5354
}
5455

55-
@Connect(combineStores({
56+
@Connect(
57+
combineStores({
5658
UserStore,
5759
UserAction
58-
}))
60+
})
61+
)
5962
classAppextendsReact.Component {
60-
render() {
61-
return (
62-
<spanonClick={this.props.UserAction.setName}>
63-
{this.props.UserStore.name}
64-
</span>
65-
)
66-
}
63+
render() {
64+
return (
65+
<spanonClick={this.props.UserAction.setName}>
66+
{this.props.UserStore.name}
67+
</span>
68+
);
69+
}
6770
}
6871
```
6972

@@ -72,58 +75,66 @@ class App extends React.Component {
7275
##Use in react project
7376

7477
```typescript
75-
import {Action,observable,combineStores,inject }from'dob'
76-
import {Provider,Connect }from'dob-react'
78+
import {Action,observable,combineStores,inject }from"dob";
79+
import {Provider,Connect }from"dob-react";
7780

7881
@observable
7982
exportclassUserStore {
80-
name='bob'
83+
name="bob";
8184
}
8285

8386
exportclassUserAction {
84-
@inject(UserStore) UserStore:UserStore;
87+
@inject(UserStore) UserStore:UserStore;
8588

86-
@Action setName () {
87-
this.store.name='lucy'
88-
}
89+
@Action
90+
setName() {
91+
this.store.name="lucy";
92+
}
8993
}
9094

9195
@Connect
9296
classAppextendsReact.Component {
93-
render() {
94-
return (
95-
<spanonClick={this.props.UserAction.setName}>
96-
{this.props.UserStore.name}
97-
</span>
98-
)
99-
}
97+
render() {
98+
return (
99+
<spanonClick={this.props.UserAction.setName}>
100+
{this.props.UserStore.name}
101+
</span>
102+
);
103+
}
100104
}
101105

102106
ReactDOM.render(
103-
<Provider {
104-
...combineStores({
105-
UserStore,
106-
UserAction
107-
})
108-
}>
109-
<App/>
110-
</Provider>
111-
,document.getElementById('react-dom'))
107+
<Provider
108+
{...combineStores({
109+
UserStore,
110+
UserAction
111+
})}
112+
>
113+
<App/>
114+
</Provider>,
115+
document.getElementById("react-dom")
116+
);
112117
```
113118

114119
##Project Examples
115120

116-
-[dob-react simple example](https://github.com/ascoders/dob-example)
117-
-[dob-react hackernews](https://github.com/dobjs/dob-react-hackernews)
118-
-[dob-react todoMVC](https://github.com/dobjs/dob-react-todomvc)
119-
-[dob-react complex online web editor](https://github.com/ascoders/gaea-editor)
120-
-[dob-redux todoMVC](https://github.com/dobjs/dob-redux-todomvc)
121+
*[dob-react simple example](https://github.com/ascoders/dob-example)
122+
*[dob-react hackernews](https://github.com/dobjs/dob-react-hackernews)
123+
*[dob-react todoMVC](https://github.com/dobjs/dob-react-todomvc)
124+
*[dob-react complex online web editor](https://github.com/ascoders/gaea-editor)
125+
*[dob-redux todoMVC](https://github.com/dobjs/dob-redux-todomvc)
121126

122127
##Ecosystem
123128

124-
-[dob-react](https://github.com/dobjs/dob-react) - Connect dob to react! Here is a basic[demo](https://jsfiddle.net/yp90Lep9/21/), and here is a[demo](https://jsfiddle.net/g19ehhgu/11/) with fractal.[Quick start](./docs/dob-react.md).
125-
-[dob-react-devtools](https://github.com/dobjs/dob-react-devtools) - Devtools for dob-react, with action and ui two way binding.
126-
-[dob-redux](https://github.com/dobjs/dob-redux) - You can use both dob and Redux by using it! Enjoy the type and convenience of dob, and the ecology of Redux.
129+
*[dob-react](https://github.com/dobjs/dob-react) - Connect dob to react! Here is a basic[demo](https://jsfiddle.net/yp90Lep9/21/), and here is a[demo](https://jsfiddle.net/g19ehhgu/11/) with fractal.[Quick start](./docs/dob-react.md).
130+
*[dob-react-devtools](https://github.com/dobjs/dob-react-devtools) - Devtools for dob-react, with action and ui two way binding.
131+
*[dob-redux](https://github.com/dobjs/dob-redux) - You can use both dob and Redux by using it! Enjoy the type and convenience of dob, and the ecology of Redux.
132+
133+
##Communication
134+
135+
Talk to us about dob using DingDing.
136+
137+
<imgsrc="https://user-images.githubusercontent.com/7970947/40582019-39bdd16e-619b-11e8-8e82-43cf529a9fff.JPG"width=500/>
127138

128139
##Note
129140

@@ -133,26 +144,26 @@ Do not allow circular dependencies between store and action, It's impossible to
133144

134145
```typescript
135146
classA {
136-
@inject(B) b
147+
@inject(B) b;
137148
}
138149
classB {
139-
@inject(A) a
150+
@inject(A) a;
140151
}
141152
```
142153

143154
###Do not deconstruct to the last level on dynamic object
144155

145156
```typescript
146-
const obj=observable({ a:1 })
157+
const obj=observable({ a:1 });
147158

148159
// good
149-
obj.a=5
160+
obj.a=5;
150161
// bad
151-
let { a }=obj
152-
a=5
162+
let { a }=obj;
163+
a=5;
153164
```
154165

155166
##Inspired
156167

157-
-[mobx](https://github.com/mobxjs/mobx)
158-
-[nx-js](https://github.com/nx-js/observer-util)
168+
*[mobx](https://github.com/mobxjs/mobx)
169+
*[nx-js](https://github.com/nx-js/observer-util)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp