Browse Source

model -> viewModel. README fixes.

Herbert Vojčík 6 years ago
parent
commit
425a5dd5f7

+ 18 - 11
README.md

@@ -45,12 +45,14 @@ the _Model_ just observe and manipulate contents of the _ViewModel_.
 
 
 More precisely:
 More precisely:
 
 
-1. You provide the class for _ViewModel_ (`TrappedCounter` / `TrappedTodo`
+1. **ViewModel.** You provide the class for _ViewModel_ (`TrappedCounter` / `TrappedTodo`
 in the examples). You can build it any way you wish, it has to be able to hold
 in the examples). You can build it any way you wish, it has to be able to hold
 all the data _ViewModel_ may need to hold. It can also hold some methods
 all the data _ViewModel_ may need to hold. It can also hold some methods
 for manipulation of these data, which is good for the example, but
 for manipulation of these data, which is good for the example, but
 in real project this should be the responsibility of _Model_.
 in real project this should be the responsibility of _Model_.
-1. `Trapped` uses [`Axxord`][axxord]  to implement a _blackboard_ pattern - in which
+1. **anApp start.** You should set up the blackboard in app startup method.
+(`CounterApp >> start` / `TodoApp >> start` in the examples).
+`Trapped` uses [`Axxord`][axxord]  to implement a _blackboard_ pattern - in which
 many external observers (called specialists) observe the data object
 many external observers (called specialists) observe the data object
 (called blackboard), make partial changes and react to them. To do that,
 (called blackboard), make partial changes and react to them. To do that,
 you must send `axxord:` to _ViewModel_ instance with an instance of `Axon`
 you must send `axxord:` to _ViewModel_ instance with an instance of `Axon`
@@ -62,24 +64,29 @@ to the blackboard, that is, the _ViewModel_).
 In Todo example, one trivial specialist is created as well,
 In Todo example, one trivial specialist is created as well,
 which observes for changes in todos and updates their remaining number.
 which observes for changes in todos and updates their remaining number.
 In real world, it should be in _Model_ with other specialists.
 In real world, it should be in _Model_ with other specialists.
-1. You write HTML and annotate the elements
+1. **index.html.** You write HTML and annotate the elements
 with the data-binding expressions (attribute `data-trap`)
 with the data-binding expressions (attribute `data-trap`)
 in which you describe what data to bind to (_path_)
 in which you describe what data to bind to (_path_)
 and how to process it in the way to the user or from the user
 and how to process it in the way to the user or from the user
 (_processors_).
 (_processors_).
-1. Since you will likely use some non-trivial processors in HTML,
+1. **App package.** Since you will likely use some non-trivial processors in HTML,
 (or in code via API which is also possible), your app package
 (or in code via API which is also possible), your app package
 should import 'trapped/Trapped-Processors'.
 should import 'trapped/Trapped-Processors'.
-1. When initializing the page, you must call `Trapped start: anArray`
+1. **anApp start.** When initializing the page, you must call `Trapped start: anArray`
 where _anArray_ should contain instances of all blackboards (most often
 where _anArray_ should contain instances of all blackboards (most often
-you will only have one, `blackboard` in the examples)
-that are intended to be used (`smalltalk.Trapped._start_([blackboard]);` JavaScript statement
-in HTML page in the examples).
-1. From that point on, you should only modify or watch data of the blackboard
+you will only have one, `viewModel` in the examples)
+that are intended to be used (`Trapped start: { viewModel }` final statement
+ of `start` method in the examples).
+1. **model** From that point on, you should only modify or watch data of the blackboard
 using Axxord API. For the example, try this is Counter example:
 using Axxord API. For the example, try this is Counter example:
-`blackboard axes: #((value)) transform: [ :old | console log: old. 2 * old ]`
+`(Trapped current byName: 'TrappedCounter')
+axes: #((value)) transform: [ :old | console log: old. 2 * old ]`
 or this in the Todo example:
 or this in the Todo example:
-`blackboard axes: #((todos) 1 done) transform: [ :state | state not ]`.
+`(Trapped current byName: 'TrappedTodo')
+axes: #((todos) 1 done) transform: [ :state | state not ]`.
+Of course, in real app, the model would be passed the view model instance
+and use it directly, not using `Trapped >> byName:` to read
+its blackboard registry.
 
 
 [axxord]: https://lolg.it/herby/Axxord
 [axxord]: https://lolg.it/herby/Axxord
 
 

+ 6 - 6
example-counter/src/Trapped-Counter.js

@@ -21,24 +21,24 @@ selector: "start",
 protocol: "startup",
 protocol: "startup",
 fn: function (){
 fn: function (){
 var self=this,$self=this;
 var self=this,$self=this;
-var model;
+var viewModel;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx1) {
 return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
-model=$recv($globals.TrappedCounter)._new();
+viewModel=$recv($globals.TrappedCounter)._new();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx1.sendIdx["new"]=1;
 $ctx1.sendIdx["new"]=1;
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
-$recv(model)._axxord_($recv($globals.SimpleAxon)._new());
-$recv($globals.Trapped)._start_([model]);
+$recv(viewModel)._axxord_($recv($globals.SimpleAxon)._new());
+$recv($globals.Trapped)._start_([viewModel]);
 return self;
 return self;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
-}, function($ctx1) {$ctx1.fill(self,"start",{model:model},$globals.CounterApp)});
+}, function($ctx1) {$ctx1.fill(self,"start",{viewModel:viewModel},$globals.CounterApp)});
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
 },
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: [],
 args: [],
-source: "start\x0a\x09| model |\x0a\x09model := TrappedCounter new.\x0a\x09model axxord: SimpleAxon new.\x0a\x09Trapped start: { model }",
+source: "start\x0a\x09| viewModel |\x0a\x09viewModel := TrappedCounter new.\x0a\x09viewModel axxord: SimpleAxon new.\x0a\x09Trapped start: { viewModel }",
 referencedClasses: ["TrappedCounter", "SimpleAxon", "Trapped"],
 referencedClasses: ["TrappedCounter", "SimpleAxon", "Trapped"],
 //>>excludeEnd("ide");
 //>>excludeEnd("ide");
 messageSends: ["new", "axxord:", "start:"]
 messageSends: ["new", "axxord:", "start:"]

+ 4 - 4
example-counter/src/Trapped-Counter.st

@@ -7,10 +7,10 @@ Object subclass: #CounterApp
 !CounterApp methodsFor: 'startup'!
 !CounterApp methodsFor: 'startup'!
 
 
 start
 start
-	| model |
-	model := TrappedCounter new.
-	model axxord: SimpleAxon new.
-	Trapped start: { model }
+	| viewModel |
+	viewModel := TrappedCounter new.
+	viewModel axxord: SimpleAxon new.
+	Trapped start: { viewModel }
 ! !
 ! !
 
 
 !CounterApp class methodsFor: 'startup'!
 !CounterApp class methodsFor: 'startup'!

+ 7 - 7
example-todo/src/Trapped-Todo.js

@@ -21,7 +21,7 @@ selector: "start",
 protocol: "startup",
 protocol: "startup",
 fn: function (){
 fn: function (){
 var self=this,$self=this;
 var self=this,$self=this;
-var model,axon;
+var viewModel,axon;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx1) {
 return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
@@ -30,7 +30,7 @@ $1=$recv($globals.TrappedTodo)._new();
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx1.sendIdx["new"]=1;
 $ctx1.sendIdx["new"]=1;
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
-model=$recv($globals.Axolator)._on_($1);
+viewModel=$recv($globals.Axolator)._on_($1);
 axon=$recv($globals.SimpleAxon)._new();
 axon=$recv($globals.SimpleAxon)._new();
 $recv(axon)._addInterest_($recv($globals.TrappedPosition)._interestOn_block_([["todos"], nil],(function(){
 $recv(axon)._addInterest_($recv($globals.TrappedPosition)._interestOn_block_([["todos"], nil],(function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -45,7 +45,7 @@ $recv((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx2) {
 return $core.withContext(function($ctx2) {
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
-return $recv(model)._axes_transform_([["todos"]],(function(){
+return $recv(viewModel)._axes_transform_([["todos"]],(function(){
 return [$globals.HashedCollection._newFromPairs_(["text","learn trapped","done",true]),$globals.HashedCollection._newFromPairs_(["text","build a trapped app","done",false])];
 return [$globals.HashedCollection._newFromPairs_(["text","learn trapped","done",true]),$globals.HashedCollection._newFromPairs_(["text","build a trapped app","done",false])];
 
 
 }));
 }));
@@ -53,16 +53,16 @@ return [$globals.HashedCollection._newFromPairs_(["text","learn trapped","done",
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)});
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)});
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
 }))._valueWithTimeout_((2000));
 }))._valueWithTimeout_((2000));
-$recv(model)._axxord_(axon);
-$recv($globals.Trapped)._start_([model]);
+$recv(viewModel)._axxord_(axon);
+$recv($globals.Trapped)._start_([viewModel]);
 return self;
 return self;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
-}, function($ctx1) {$ctx1.fill(self,"start",{model:model,axon:axon},$globals.TodoApp)});
+}, function($ctx1) {$ctx1.fill(self,"start",{viewModel:viewModel,axon:axon},$globals.TodoApp)});
 //>>excludeEnd("ctx");
 //>>excludeEnd("ctx");
 },
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: [],
 args: [],
-source: "start\x0a\x09| model axon |\x0a\x09model := Axolator on: TrappedTodo new.\x0a    axon := SimpleAxon new.\x0a\x09\x0a\x09axon addInterest: (TrappedPosition\x0a\x09\x09interestOn: #((todos) nil)\x0a\x09\x09block: [ axon changed: #((remaining)) ]).\x0a\x0a    [ model axes: #((todos)) transform: [{\x0a        #{'text'->'learn trapped'. 'done'->true}.\x0a        #{'text'->'build a trapped app'. 'done'->false}\x0a    }]] valueWithTimeout: 2000.\x0a\x0a\x09model axxord: axon.\x0a\x09Trapped start: { model }",
+source: "start\x0a\x09| viewModel axon |\x0a\x09viewModel := Axolator on: TrappedTodo new.\x0a    axon := SimpleAxon new.\x0a\x09\x0a\x09axon addInterest: (TrappedPosition\x0a\x09\x09interestOn: #((todos) nil)\x0a\x09\x09block: [ axon changed: #((remaining)) ]).\x0a\x0a    [ viewModel axes: #((todos)) transform: [{\x0a        #{'text'->'learn trapped'. 'done'->true}.\x0a        #{'text'->'build a trapped app'. 'done'->false}\x0a    }]] valueWithTimeout: 2000.\x0a\x0a\x09viewModel axxord: axon.\x0a\x09Trapped start: { viewModel }",
 referencedClasses: ["Axolator", "TrappedTodo", "SimpleAxon", "TrappedPosition", "Trapped"],
 referencedClasses: ["Axolator", "TrappedTodo", "SimpleAxon", "TrappedPosition", "Trapped"],
 //>>excludeEnd("ide");
 //>>excludeEnd("ide");
 messageSends: ["on:", "new", "addInterest:", "interestOn:block:", "changed:", "valueWithTimeout:", "axes:transform:", "axxord:", "start:"]
 messageSends: ["on:", "new", "addInterest:", "interestOn:block:", "changed:", "valueWithTimeout:", "axes:transform:", "axxord:", "start:"]

+ 5 - 5
example-todo/src/Trapped-Todo.st

@@ -7,21 +7,21 @@ Object subclass: #TodoApp
 !TodoApp methodsFor: 'startup'!
 !TodoApp methodsFor: 'startup'!
 
 
 start
 start
-	| model axon |
-	model := Axolator on: TrappedTodo new.
+	| viewModel axon |
+	viewModel := Axolator on: TrappedTodo new.
     axon := SimpleAxon new.
     axon := SimpleAxon new.
 	
 	
 	axon addInterest: (TrappedPosition
 	axon addInterest: (TrappedPosition
 		interestOn: #((todos) nil)
 		interestOn: #((todos) nil)
 		block: [ axon changed: #((remaining)) ]).
 		block: [ axon changed: #((remaining)) ]).
 
 
-    [ model axes: #((todos)) transform: [{
+    [ viewModel axes: #((todos)) transform: [{
         #{'text'->'learn trapped'. 'done'->true}.
         #{'text'->'learn trapped'. 'done'->true}.
         #{'text'->'build a trapped app'. 'done'->false}
         #{'text'->'build a trapped app'. 'done'->false}
     }]] valueWithTimeout: 2000.
     }]] valueWithTimeout: 2000.
 
 
-	model axxord: axon.
-	Trapped start: { model }
+	viewModel axxord: axon.
+	Trapped start: { viewModel }
 ! !
 ! !
 
 
 !TodoApp class methodsFor: 'startup'!
 !TodoApp class methodsFor: 'startup'!