Search the Community

@kongondo This is a continued conversation from this thread I had with you about using Alpine.js in module development. Thanks again for your help! I want to refactor a module that is build using jquery with alpine. The main goal is to make the code simpler and more maintainable (It's working fine with jQuery, so not sure if it's worth the effort). Alpine is still very new to me. I feel more compftable working with jQuery, but I can see the benefit of using a reactive framework. Do you think it makes sense to refactor my module at this stage? Here is a simplified description of what my module does: The module is a pagebuilder module based on pagetable that uses the PW API to generate some inputfields. These inputfields are than used to set some css styling on the pagebuilder items/blocks. So when a block is clicked, the inputfields get populatet with data from a JSON object based on the block that was clicked (each block has a unique ID). With jQuery I use a on.change event to listen to changes to the inputs and than save the new value to the corresponding ID inside my JSON object. This code works fine, but is quite long now, and I think it maybe good to use the data binding ability of a reactive framework like alpine.js instead. With the help of you I was able to listen to the change event and call my save function to update the JSON. Now Iam looking for a way to set the values of the inputfields. The values have to be set when a block is clicked. Hope that makes sense ? here is my JS code for alpine so far (I added the attributes inside my php template vie PW API): import * as save from './save'; import Alpine from "alpinejs"; // this is my json object var jsonData = $('#Inputfield_pgrid_settings').val(); var objData = $.parseJSON(jsonData); // ALPINE (version 3+) document.addEventListener("alpine:init", () => { console.log('alpine!'); // this is just for testing, it works to set the value for one field // I want a way to get the value of a field based on its name Alpine.store("mystore", { settingsData: { testValue: 22 }, }) Alpine.data("settingsData", () => ({ cssChange(event) { let value = event.target.value; let name = event.target.name; console.log(name + ': ' + value); this.$store.mystore.settingsData.testValue = value; // caling a function to save the json setStyle(name, value); } })) }) Alpine.start(); JSON example: { "items": [{ "id": "block_editor-4976", "cssClass": "block_editor-4976", "cssClasses": "new-class", "tagName": "div", "state": "none", "breakpoints": { "base": { "css": { "grid-column-start": "auto", "grid-row-start": "auto", "grid-column-end": "span 6", "grid-row-end": "span 1" }, "size": "@media (min-width: 640px)", "name": "base" }, "m": { "css": { "grid-column-start": "auto", "grid-row-start": "auto", "grid-column-end": "span 6", "grid-row-end": "span 1" }, "size": "@media (max-width: 960px)", "name": "m" } } }, { "id": "block_editor-4980", "cssClass": "block_editor-4980", "cssClasses": "new-class", "tagName": "div", "state": "none", "breakpoints": { "base": { "css": { "grid-column-start": "auto", "grid-row-start": "auto" }, "size": "@media (min-width: 640px)", "name": "base" } } }], "breakpointActive": "s", "breakpointActiveSize": "@media (max-width: 960px)" }