De app aanpassen

Onze app volgt een MVC-structuur (Model, View, Controller)

Model

Het model definieert de verschillende kenmerken en slaat de waarden ervan op. De waarden van de verschillende kenmerken die in het model zijn opgeslagen, zijn via de syntaxis toegankelijk via de controller

this.getValue('attributeName')

Voor aanpassing in de app worden alle nieuwe kenmerken toegevoegd onder een kaart in het model.
Om een nieuw attribuut in het model te plaatsen zullen wij de volgende syntaxis in het controlemechanisme gebruiken:

// If a key is not already in model then it will be added to extraProps
this.setValue('key', value)

Om tot een attribuut toegang te hebben dat aan het model wordt toegevoegd zullen wij de volgende syntaxis gebruiken:

const value = this.getValue("key")

Weergave

De weergave definieert de gebruikersinterface van de app. We gebruiken JSON-bestanden om de weergave van onze bestanden te definiëren. Hier, bepalen wij de componenten, css (zoals die in de winningsklasse van componenten wordt gegeven) en geven de waarden terug die in het model worden opgeslagen.
In onze app wordt elke weergave gedefinieerd met behulp van een JSON. Naar de JSON's wordt verwezen met behulp van hun unieke id's, die een id.

Controller

De controller wordt gebruikt om gebeurtenissen af te handelen en de gegevens te verwerken. Het controlemechanisme wordt gebruikt om gegevens van de server te halen en te verzenden, is het de interface tussen wat op UI wordt getoond en op het achtereind wordt opgeslagen.

methodName: function(args){
    // functionality
}

De methodName hier fungeert als key verwijzen naar de methode in de JSON-weergave of in andere functies

this.next('methodName', args)

Voorbeeld

Laten we nu een eenvoudig voorbeeld gebruiken om te laten zien hoe deze drie componenten met elkaar communiceren.
Wij zullen een knoop toevoegen die zijn etiketwaarde op een klik schakelt

Voorbeeld weergeven

Hieronder wordt de JSON gedefinieerd voor een knop met een dynamische tekst die in het model is opgeslagen onder de variabelenaam. buttonLabel.
In dit voorbeeld wordt het label gewijzigd wanneer u op de knop klikt.

{
    "component": "button",
    "label": "@extraProps.buttonLabel",
    "variant": "cta",
    "on-click": "switchButtonLabel",
}

Modelvoorbeeld

in dit geval extraProps.buttonLabel bevat het label van de knop

Voorbeeld van controller

  controller: {
    init: function (context) {
      context.setValue("buttonLabel", "Submit")
    },

    switchButtonLabel(){
        const buttonLabel = this.getValue("buttonLabel") === "Submit"? "Cancel" : "Submit"
        this.setValue("buttonLabel", buttonLabel)
    }
  }

Onder GIF ziet u de bovenstaande code in actie