#5490 initial example

Author: tobiu

resources/data/deck/learnneo/pages/GuideViewModels.md

@@ -0,0 +1,40 @@
+Inline Model
+
+<pre data-neo>
+import Container from  '../../../../src/container/Base.mjs';
+import Label     from  '../../../../src/component/Label.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        model: {
+            data: {
+                hello: 'Hello',
+                world: 'world!'
+            }
+        },
+        itemDefaults: {
+            module: Label,
+            style : {margin: '1em'}
+        },
+        items: [{
+            bind: {
+                // We can use template literals containing VM data props
+                text: data => `${data.hello} ${data.world}`
+            }
+        }, {
+            bind: {
+                // We can also use VM data props directly inside fat arrow functions
+                text: data => data.hello + ' ' + data.world
+            }
+        }, {
+            bind: {
+                // We can convert the config into a function to use VM data props
+                text(data) {return data.hello + ' ' + data.world}
+            }
+        }],
+        layout: 'vbox'
+    }
+}
+Neo.setupClass(MainView);
+</pre>

resources/data/deck/learnneo/tree.json

@@ -26,6 +26,7 @@
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
         {"name": "Component and Container Basics",          "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
         {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
+        {"name": "View Models",                             "parentId": "InDepth",           "isLeaf": true,  "id": "GuideViewModels"},
         {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents"},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables"},