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

Commitea98ca2

Browse files
committed
add more comments
1 parenta3dea0b commitea98ca2

File tree

5 files changed

+133
-10
lines changed

5 files changed

+133
-10
lines changed

‎js/app.js‎

Lines changed: 97 additions & 10 deletions
Large diffs are not rendered by default.

‎src/components/Todos/model.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import{Observable}from'rx';
22

3+
// A helper function to get filter function to filter the todo items
4+
// in the virtual dome according to which route we are on.
35
functiongetFilterFn(route){
46
switch(route){
57
case'/active':return(task=>task.completed===false);
@@ -8,6 +10,7 @@ function getFilterFn(route) {
810
}
911
}
1012

13+
// A helper to search for the todo index.
1114
functionsearchTodoIndex(todosList,todoid){
1215
letpointerId;
1316
letindex;
@@ -27,6 +30,10 @@ function searchTodoIndex(todosList, todoid) {
2730
returnnull;
2831
}
2932

33+
// MAKE MODIFICATION STREAM
34+
// A function that takes the intent on the todo list
35+
// and returns a stream of functions that expect todosData (the data model)
36+
// and return a modified version of the data.
3037
functionmakeModification$(actions){
3138
constclearInputMod$=actions.clearInput$.map(()=>(todosData)=>{
3239
returntodosData;
@@ -93,12 +100,28 @@ function makeModification$(actions) {
93100
);
94101
}
95102

103+
// THIS IS THE MODEL FUNCTION
104+
// It expects the actions coming in from the todo items and
105+
// the initial localStorage data.
96106
functionmodel(actions,sourceTodosData$){
107+
// THE BUSINESS LOGIC
108+
// Actions are passed to the `makeModification$` function
109+
// which creates a stream of modification functions that needs
110+
// to be applied on the todoData when an action happens.
97111
constmodification$=makeModification$(actions);
98112

113+
// RETURN THE MODEL DATA
114+
// Take the initial localStorage data stream...
99115
returnsourceTodosData$
116+
// ...and concatenate it with the stream of modification
117+
// functions...
100118
.concat(modification$)
119+
// ...and apply every modification function on the
120+
// current todosData which is the "accumulater"
121+
// of this `.scan` function.
101122
.scan((todosData,modFn)=>modFn(todosData))
123+
// Always serve any subscriber the latest state that
124+
// was flowing through this Observable.
102125
.shareReplay(1);
103126
}
104127

‎src/components/Todos/storage-sink.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// Turn the data object that contains
2+
// the todos into a string for localStorage.
13
exportdefaultfunctionserialize(todos$){
24
returntodos$.map(todosData=>JSON.stringify(
35
{

‎src/components/Todos/storage-source.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ const mergeWithDefaultTodosData = todosData => {
2222
returnmerge(defaultTodosData,todosData);
2323
}
2424

25+
// Take localStorage todoData stream and transform into
26+
// a JavaScript object. Set default data.
2527
exportdefaultfunctiondeserialize(localStorageValue$){
2628
returnlocalStorageValue$
2729
.map(safeJSONParse)

‎src/components/Todos/view.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ function renderHeader() {
1515
}
1616

1717
functionrenderMainSection(todosData){
18+
19+
console.log(todosData.filterFn.toString());
1820
letallCompleted=todosData.list.reduce((x,y)=>x&&y.completed,true);
1921
returnsection('.main',{
2022
style:{'display':todosData.list.length ?'' :'none'}
@@ -24,6 +26,8 @@ function renderMainSection(todosData) {
2426
checked:allCompleted
2527
}),
2628
ul('.todo-list',todosData.list
29+
// Apply filter function according to
30+
// route.
2731
.filter(todosData.filterFn)
2832
.map(data=>data.todoItem.DOM)
2933
)
@@ -69,6 +73,11 @@ function renderFooter(todosData) {
6973
])
7074
}
7175

76+
// THE VIEW
77+
// This function expects the stream of todosData
78+
// from the model function and turns it into a
79+
// virtual DOM stream that is then ultimately returned intot
80+
// the DOM sink in the index.js.
7281
exportdefaultfunctionview(todos$){
7382
returntodos$.map(todos=>
7483
div([

0 commit comments

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