@gogocat/data-bind 1.11.0 → 2.0.0

package/examples/js/ifBindingDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+
 (() => {
     const myComponentViewModel = {
         renderIntro: false,
@@ -13,36 +13,36 @@
             {title: 'The Ugly Duckling', value: 's2'},
             {title: 'The Giving Tree', value: 's3'},
         ],
-        setStoryOptionAttr: function($data, oldAttrObj, $el) {
+        setStoryOptionAttr($data, oldAttrObj, $el) {
             if ($data && $data.value) {
                 return {
                     value: $data.value,
                 };
             }
         },
-        onSelectedStory: function(e, $el, newValue, oldValue) {
+        onSelectedStory(e, $el, newValue, oldValue) {
             e.preventDefault();
             this.APP.publish('SELECTED_STORY', newValue);
         },
-        renderItem: function(e, $el) {
+        renderItem(e, $el) {
             e.preventDefault();
             this.renderIntro = true;
-            this.updateView();
+            // Reactive mode - automatic render!
         },
-        removeItem: function(e, $el) {
+        removeItem(e, $el) {
             e.preventDefault();
             this.renderIntro = false;
-            this.updateView();
+            // Reactive mode - automatic render!
         },
-        updateView(opt) {
-            this.APP.render(opt);
+        updateView(opt) {  // Note: render is automatic in reactive mode
+            // Reactive mode - automatic render!
         },
     };
 
     const compStoryDetailViewModel = {
         selectedStory: '',
         story: {},
-        setStoryImgAttr: function() {
+        setStoryImgAttr() {
             const picPath = this.story.pic || '';
             const ret = {
                 alt: this.story.title,
@@ -55,7 +55,7 @@
             }
             return ret;
         },
-        onStoryChange: function(id) {
+        onStoryChange(id) {
             if (storiesData[id] && id !== this.selectedStory) {
                 this.story = storiesData[id];
                 this.selectedStory = id;
@@ -63,10 +63,10 @@
                 this.story = '';
                 this.selectedStory = '';
             }
-            this.updateView();
+            // Reactive mode - automatic render!
         },
-        updateView(opt) {
-            this.APP.render(opt);
+        updateView(opt) {  // Note: render is automatic in reactive mode
+            // Reactive mode - automatic render!
         },
     };
 
@@ -96,7 +96,7 @@
 
     // main
     const myComponent = dataBind.init(document.querySelector('[data-bind-comp="myComponent"]'), myComponentViewModel);
-    myComponent.render().then(function() {
+    myComponent.render().then(() => {
         // for debug
         console.log(myComponent);
         window.myComponent = myComponent;
@@ -104,7 +104,7 @@
 
     // story detail componenet
     const compStoryDetail = dataBind.init(document.querySelector('[data-bind-comp="compStoryDetail"]'), compStoryDetailViewModel);
-    compStoryDetail.render().then(function(thisComponent) {
+    compStoryDetail.render().then((thisComponent) => {
         thisComponent.subscribe('SELECTED_STORY', thisComponent.viewModel.onStoryChange);
         // for debug
         console.log(compStoryDetail);

package/examples/js/reactiveDemo.js

@@ -0,0 +1,119 @@
+// Manual Mode Component
+(() => {
+    const viewModel = {
+        name: 'John Doe',
+        age: 30,
+        counter: 0,
+
+        // Click handler methods
+        updateData() {
+            this.name = 'Jane Smith';
+            this.age = 25;
+            // MUST call render manually in manual mode
+            this.APP.render();
+        },
+
+        incrementCounter() {
+            this.counter += 1;
+            // MUST call render manually in manual mode
+            this.APP.render();
+        },
+    };
+
+    const component = dataBind.init(
+        document.querySelector('[data-bind-comp="manual-component"]'),
+        viewModel,
+        {reactive: false}, // Explicitly disable reactive mode for manual mode
+    );
+
+    component.render().then(() => {
+        console.log('Manual component ready');
+        window.manualComponent = component;
+    });
+})();
+
+// Reactive Mode Component
+(() => {
+    const viewModel = {
+        name: 'John Doe',
+        age: 30,
+        counter: 0,
+
+        // Click handler methods - NO render() calls needed!
+        updateData() {
+            this.name = 'Jane Smith';
+            this.age = 25;
+            // Automatic render in reactive mode!
+        },
+
+        incrementCounter() {
+            this.counter += 1;
+            // Automatic render in reactive mode!
+        },
+    };
+
+    const component = dataBind.init(
+        document.querySelector('[data-bind-comp="reactive-component"]'),
+        viewModel,
+        // Reactive mode is now the default! No options needed.
+    );
+
+    component.render().then(() => {
+        console.log('Reactive component ready');
+        console.log('isReactive:', component.isReactive);
+        window.reactiveComponent = component;
+    });
+})();
+
+// Advanced Reactive Demo with Arrays
+(() => {
+    const viewModel = {
+        todos: [
+            {text: 'Learn dataBind.js', completed: false},
+            {text: 'Build awesome app', completed: false},
+            {text: 'Ship to production', completed: false},
+        ],
+        todoCounter: 4,
+
+        // Click handler methods - all automatic!
+        addTodo() {
+            this.todos.push({
+                text: `New todo ${this.todoCounter}`,
+                completed: false,
+            });
+            this.todoCounter += 1;
+            // Automatic render!
+        },
+
+        completeFirst() {
+            if (this.todos.length > 0) {
+                this.todos[0].completed = true;
+                // Automatic render!
+            }
+        },
+
+        removeLast() {
+            this.todos.pop();
+            // Automatic render!
+        },
+
+        batchUpdate() {
+            // Multiple changes batched into single render automatically!
+            this.todos.push({text: 'Batch todo 1', completed: false});
+            this.todos.push({text: 'Batch todo 2', completed: false});
+            this.todos.push({text: 'Batch todo 3', completed: false});
+            // Only 1 render happens due to requestAnimationFrame debouncing!
+        },
+    };
+
+    const component = dataBind.init(
+        document.querySelector('[data-bind-comp="advanced-reactive"]'),
+        viewModel,
+        // Reactive mode is the default!
+    );
+
+    component.render().then(() => {
+        console.log('Advanced reactive component ready');
+        window.advancedReactiveComponent = component;
+    });
+})();

package/examples/js/switchBindingDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+
 (() => {
     const myComponentViewModel = {
         heading: 'This heading is inside switch binding',
@@ -11,14 +11,14 @@
             {title: 'The Ugly Duckling', value: 's2'},
             {title: 'The Giving Tree', value: 's3'},
         ],
-        setStoryOptionAttr: function($data, oldAttrObj, $el) {
+        setStoryOptionAttr($data, oldAttrObj, $el) {
             if ($data && $data.value) {
                 return {
                     value: $data.value,
                 };
             }
         },
-        onSelectedStory: function(e, $el, newValue, oldValue) {
+        onSelectedStory(e, $el, newValue, oldValue) {
             const id = newValue;
 
             e.preventDefault();
@@ -30,9 +30,9 @@
                 this.story = {};
                 this.selectedStory = '';
             }
-            this.updateView();
+            // Reactive mode - automatic render!
         },
-        setStoryImgAttr: function() {
+        setStoryImgAttr() {
             const picPath = this.story.pic || '';
             const ret = {
                 alt: this.story.title,
@@ -45,8 +45,8 @@
             }
             return ret;
         },
-        updateView(opt) {
-            this.APP.render(opt);
+        updateView(opt) {  // Note: render is automatic in reactive mode
+            // Reactive mode - automatic render!
         },
     };
 
@@ -75,7 +75,7 @@
     // start binding on DOM ready
     // main
     const myComponent = dataBind.init(document.querySelector('[data-bind-comp="myComponent"]'), myComponentViewModel);
-    myComponent.render().then(function() {
+    myComponent.render().then(() => {
         // for debug
         console.log(myComponent);
         window.myComponent = myComponent;