@gogocat/data-bind 1.12.0 → 2.0.0

package/examples/bootstrap/js/compMessageDialog.js

@@ -1,10 +1,10 @@
 // databing message-dialog-component
 
-(function($, window) {
+(function (window) {
     let compMessageDialog;
     const el = {
-        messageModal: '#message-modal',
-        messageTextArea: '#message',
+        messageModal: null,
+        messageTextArea: null,
     };
     const viewModel = {
         numSelectedProviders: '',
@@ -13,45 +13,46 @@
         selectedProviders: '',
         defaultMessageText: 'Hi,\nCould you please provide a quote for the following work:\n',
         sendingMessage: false,
-        onMessageSubmit: function(e, $el, formData) {
+        onMessageSubmit(e, formEl, formData) {
             e.preventDefault();
             formData.ids = this.adIds;
             this.sendingMessage = true;
             this.updateStatus();
             console.log('post data: ', formData);
         },
-        onTriggerSelectedAds: function(selectedAdData) {
+        onTriggerSelectedAds(selectedAdData) {
             this.selectedAdData = selectedAdData;
             this.numSelectedProviders = selectedAdData.length > 1 ? selectedAdData.length : '';
             this.selectedProviders = selectedAdData.length > 1 ? 'advertisers ID: ' : 'advertiser ID:';
-            this.adIds = selectedAdData.map(function(item, index) {
+            this.adIds = selectedAdData.map((item, index) => {
                 return item.id;
             });
             this.selectedProviders += this.adIds.toString();
             this.updateStatus();
         },
-        updateStatus: function() {
-            compMessageDialog.render();
+        updateStatus() {
+            // Reactive mode - automatic render!
         },
     };
 
-    $(document).ready(function() {
-        $.each(el, function(k, v) {
-            el[k] = $(v);
-        });
+    document.addEventListener('DOMContentLoaded', () => {
+        el.messageModal = document.getElementById('message-modal');
+        el.messageTextArea = document.getElementById('message');
 
-        compMessageDialog = dataBind.init($('[data-bind-comp="message-dialog-component"]')[0], viewModel);
-        compMessageDialog.render().then(function(comp) {
+        const messageDialogElement = document.querySelector('[data-bind-comp="message-dialog-component"]');
+        compMessageDialog = dataBind.init(messageDialogElement, viewModel);
+        compMessageDialog.render().then((comp) => {
             const self = comp;
             compMessageDialog.subscribe('TRIGGER-MESSAGE-DIALOG', self.viewModel.onTriggerSelectedAds);
 
-            el.messageModal.on('shown.bs.modal', function() {
-                el.messageTextArea[0].defaultValue = self.viewModel.defaultMessageText;
+            // Bootstrap 5 modal events
+            el.messageModal.addEventListener('shown.bs.modal', () => {
+                el.messageTextArea.defaultValue = self.viewModel.defaultMessageText;
                 el.messageTextArea.focus();
             });
 
-            el.messageModal.on('hidden.bs.modal', function() {
-                el.messageTextArea[0].defaultValue = self.viewModel.defaultMessageText;
+            el.messageModal.addEventListener('hidden.bs.modal', () => {
+                el.messageTextArea.defaultValue = self.viewModel.defaultMessageText;
                 self.viewModel.sendingMessage = false;
             });
             // for debug only
@@ -60,4 +61,4 @@
             console.log('compMessageDialog rendered', window.compMessageDialog);
         });
     });
-})(jQuery, window);
+})(window);

package/examples/bootstrap/js/compSearchBar.js

@@ -1,27 +1,19 @@
 // databing search-bar
 
-(function($, window) {
+(function (window) {
     let compSearchBar;
-    const getFormData = function($form) {
-        const sArray = $form.serializeArray();
-        const data = {};
-        sArray.map(function(n) {
-            data[n['name']] = n['value'];
-        });
 
-        return data;
-    };
     const viewModel = {
         searchWord: '',
         searchLocation: '',
         searching: false,
-        onSearchWordChange: function(e, $el, newValue, oldValue) {
+        onSearchWordChange(e, el, newValue, oldValue) {
             console.log('onSearchWordChange: ', ' newValue: ', newValue, ' oldValue: ', oldValue);
         },
-        onSearchLocationChange: function(e, $el, newValue, oldValue) {
+        onSearchLocationChange(e, el, newValue, oldValue) {
             console.log('onSearchWordChange: ', ' newValue: ', newValue, ' oldValue: ', oldValue);
         },
-        onSearchSubmit: function(e, $form, formData) {
+        onSearchSubmit(e, form, formData) {
             e.preventDefault();
 
             // simple validation
@@ -36,18 +28,19 @@
             this.updateStatus();
             console.log('onSearchSubmit: ', formData);
         },
-        onSearchCompleted: function() {
+        onSearchCompleted() {
             this.searching = false;
             this.updateStatus();
         },
-        updateStatus: function() {
-            compSearchBar.render();
+        updateStatus() {
+            // Reactive mode - automatic render!
         },
     };
 
-    $(document).ready(function() {
-        compSearchBar = dataBind.init($('[data-bind-comp="search-bar"]')[0], viewModel);
-        compSearchBar.render().then(function(comp) {
+    document.addEventListener('DOMContentLoaded', () => {
+        const searchBarElement = document.querySelector('[data-bind-comp="search-bar"]');
+        compSearchBar = dataBind.init(searchBarElement, viewModel);
+        compSearchBar.render().then((comp) => {
             const self = comp;
             compSearchBar.subscribe('SEARCH-COMPLETED', self.viewModel.onSearchCompleted);
             // for debug only
@@ -57,4 +50,4 @@
             console.log('compSearchBar rendered', window.compSearchBar);
         });
     });
-})(jQuery, window);
+})(window);

package/examples/bootstrap/js/compSearchResults.js

@@ -1,16 +1,16 @@
 // databing compSearchResults
 
-(function($, window) {
+(function (window) {
     const isGithubPage = window.location.hostname === 'gogocat.github.io';
     const examplePath = isGithubPage ? 'https://gogocat.github.io/dataBind/examples/' : '/examples/';
     let compSearchResults;
     const searchUrl = `${examplePath}/bootstrap/js/searchResult.json`;
     const featureAdsResultUrl = `${examplePath}/bootstrap/js/featureAdsResult.json`;
-    const $searchResultColumns = $('#search-result-columns');
-    const converResultsData = function(data) {
-        ret = [];
-        data.forEach(function(item, index) {
-            const newItem = $.extend({}, item);
+    const searchResultColumns = document.getElementById('search-result-columns');
+    const converResultsData = function (data) {
+        const ret = [];
+        data.forEach((item, index) => {
+            const newItem = Object.assign({}, item);
             if (newItem.bookmarked) {
                 newItem.bookmarkedCss = 'active';
             }
@@ -33,51 +33,52 @@
         replacedInitResults: false,
         isNewSearch: false,
         currentQuery: null,
-        getSearchResults: function(formData) {
+        getSearchResults(formData) {
             const self = this;
 
             this.isNewSearch = JSON.stringify(self.currentQuery) !== JSON.stringify(formData);
 
             self.currentQuery = formData;
 
-            $.getJSON(searchUrl, self.currentQuery)
-                .done(function(data) {
+            fetch(searchUrl)
+                .then(response => response.json())
+                .then((data) => {
                     // mock network delay
-                    setTimeout(function() {
+                    setTimeout(() => {
                         self.loading = false;
                         self.onSearchResult(data);
                         compSearchResults.publish('SEARCH-COMPLETED', data);
                     }, 1000);
                 })
-                .fail(function(jqXHR, textStatus, errorThrown) {
+                .catch((error) => {
                     self.loading = false;
                     compSearchResults.publish('SEARCH-COMPLETED', {
-                        fail: errorThrown,
+                        fail: error,
                     });
-                    self.logError(jqXHR, textStatus, errorThrown);
+                    self.logError(error);
                 });
         },
-        getMessageCheckBoxAttr: function(data) {
+        getMessageCheckBoxAttr(data) {
             return {
                 id: data.id,
                 name: data.id,
             };
         },
-        getMessageCheckBoxLabelAttr: function(data) {
+        getMessageCheckBoxLabelAttr(data) {
             return {
                 for: data.id,
             };
         },
-        onSearchResult: function(data) {
+        onSearchResult(data) {
             let newResults = [];
 
             if (this.isNewSearch) {
-                $searchResultColumns.empty();
+                searchResultColumns.innerHTML = '';
                 this.searchResults.length = 0;
             }
             // first search result - remove current results (featured items)
             if (compSearchResults.isServerRendered && !this.replacedInitResults) {
-                // $searchResultColumns.empty();
+                // searchResultColumns.innerHTML = '';
                 this.searchResultTitle = 'Search results';
                 // this.searchResults.length = 0;
                 this.replacedInitResults = true;
@@ -99,35 +100,35 @@
 
             console.log('onSearchResult: ', data);
         },
-        logError: function() {
-            // eslint-disable-next-line prefer-rest-params
+        logError() {
+
             console.warn('search result error: ', arguments);
         },
-        onMoreResults: function() {
+        onMoreResults() {
             // get same mock result as example only
             this.loading = true;
             this.updateStatus();
             this.getSearchResults();
         },
-        onAdBookmarkClick: function(e, $el) {
+        onAdBookmarkClick(e, el) {
             const activeCss = 'active';
-            const isActivated = $el.classList.contains(activeCss);
-            const resultIndex = $el.getAttribute('data-index');
+            const isActivated = el.classList.contains(activeCss);
+            const resultIndex = el.getAttribute('data-index');
 
             this.searchResults[resultIndex].bookmarked = !isActivated;
             this.searchResults[resultIndex].bookmarkedCss = isActivated ? '' : 'active';
             this.updateStatus();
         },
-        onAdMessageCheck: function(e, $el, newValue, oldValue) {
-            console.log('onAdMessageCheck: ', $el, newValue, oldValue);
+        onAdMessageCheck(e, el, newValue, oldValue) {
+            console.log('onAdMessageCheck: ', el, newValue, oldValue);
             this.updateStatus();
         },
-        onMessageTriggerClick: function(e, $el) {
+        onMessageTriggerClick(e, el) {
             compSearchResults.publish('TRIGGER-MESSAGE-DIALOG', this.selectedResults);
-            console.log('onMessageTriggerClick: ', $el);
+            console.log('onMessageTriggerClick: ', el);
         },
-        updateStatus: function(opt) {
-            this.selectedResults = this.searchResults.filter(function(result, index) {
+        updateStatus(opt) {
+            this.selectedResults = this.searchResults.filter((result, index) => {
                 return result.selected;
             });
             this.messageTriggerCss = this.selectedResults.length ? 'show' : '';
@@ -136,20 +137,23 @@
     };
 
     // get server rendered featureAdsResults then init compSearchResults
-    $.getJSON(featureAdsResultUrl).done(function(featureAdsResultData) {
-        viewModel.searchResults = converResultsData(featureAdsResultData);
+    fetch(featureAdsResultUrl)
+        .then(response => response.json())
+        .then((featureAdsResultData) => {
+            viewModel.searchResults = converResultsData(featureAdsResultData);
 
-        compSearchResults = dataBind.init($('[data-bind-comp="search-results-component"]')[0], viewModel);
-        compSearchResults
-            .render() // overwrite default server rendered option
-            .then(function(comp) {
-                const self = comp;
-                // subscribe events
-                compSearchResults.subscribe('SEARCH-AD', self.viewModel.getSearchResults);
-                // for debug only
-                window.compSearchResultsViewModel = self.viewModel;
-                window.compSearchResults = compSearchResults;
-                console.log('compSearchResults rendered', window.compSearchResults);
-            });
-    });
-})(jQuery, window);
+            const searchResultsElement = document.querySelector('[data-bind-comp="search-results-component"]');
+            compSearchResults = dataBind.init(searchResultsElement, viewModel);
+            compSearchResults
+                .render() // overwrite default server rendered option
+                .then((comp) => {
+                    const self = comp;
+                    // subscribe events
+                    compSearchResults.subscribe('SEARCH-AD', self.viewModel.getSearchResults);
+                    // for debug only
+                    window.compSearchResultsViewModel = self.viewModel;
+                    window.compSearchResults = compSearchResults;
+                    console.log('compSearchResults rendered', window.compSearchResults);
+                });
+        });
+})(window);

package/examples/bootstrap/js/featureAdsResult.json

@@ -1,66 +1,66 @@
-[{
-        "id": "001",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-home.jpg",
-        "bookmarked": false,
-        "numLikes": 110
-    },
-    {
-        "id": "002",
-        "title": "Card title",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 9
-    },
-    {
-        "id": "003",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-deck.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "004",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-carpenter.jpg",
-        "bookmarked": false,
-        "numLikes": 8,
-        "highlight": true
-    },
-    {
-        "id": "005",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 68
-    },
-    {
-        "id": "006",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-bathrooms.jpg",
-        "bookmarked": true,
-        "numLikes": 99
-    },
-    {
-        "id": "007",
-        "title": "Card title",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 9
-    },
-    {
-        "id": "008",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-backyard.jpg",
-        "bookmarked": false,
-        "numLikes": 24
-    }
+[{
+        "id": "001",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-home.jpg",
+        "bookmarked": false,
+        "numLikes": 110
+    },
+    {
+        "id": "002",
+        "title": "Card title",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 9
+    },
+    {
+        "id": "003",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-deck.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "004",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-carpenter.jpg",
+        "bookmarked": false,
+        "numLikes": 8,
+        "highlight": true
+    },
+    {
+        "id": "005",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 68
+    },
+    {
+        "id": "006",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-bathrooms.jpg",
+        "bookmarked": true,
+        "numLikes": 99
+    },
+    {
+        "id": "007",
+        "title": "Card title",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 9
+    },
+    {
+        "id": "008",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-backyard.jpg",
+        "bookmarked": false,
+        "numLikes": 24
+    }
 ]

package/examples/bootstrap/js/searchResult.json

@@ -1,58 +1,58 @@
-[{
-        "id": "001",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-home.jpg",
-        "bookmarked": false,
-        "numLikes": 110
-    },
-    {
-        "id": "456",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "789",
-        "title": "Sample carpemter service",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "bootstrap/images/pic-carpenter.jpg",
-        "bookmarked": false,
-        "numLikes": 8,
-        "highlight": true
-    },
-    {
-        "id": "888",
-        "title": "Sample timber floor service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-deck.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "222",
-        "title": "Sample timber floor service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "333",
-        "title": "Sample boothroom service",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "bootstrap/images/pic-bathrooms.jpg",
-        "bookmarked": true,
-        "numLikes": 8
-    },
-    {
-        "id": "444",
-        "title": "Sample gardening service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-backyard.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    }
+[{
+        "id": "001",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-home.jpg",
+        "bookmarked": false,
+        "numLikes": 110
+    },
+    {
+        "id": "456",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "789",
+        "title": "Sample carpemter service",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "bootstrap/images/pic-carpenter.jpg",
+        "bookmarked": false,
+        "numLikes": 8,
+        "highlight": true
+    },
+    {
+        "id": "888",
+        "title": "Sample timber floor service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-deck.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "222",
+        "title": "Sample timber floor service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "333",
+        "title": "Sample boothroom service",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "bootstrap/images/pic-bathrooms.jpg",
+        "bookmarked": true,
+        "numLikes": 8
+    },
+    {
+        "id": "444",
+        "title": "Sample gardening service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-backyard.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    }
 ]