Backbone.js - View Helper, Thorax.js

Extensies zoals Thorax.js Ze hebben een aantal tools waarmee we de constructie van bepaald gedrag van onze applicaties kunnen vergemakkelijken, hierdoor kunnen we, als we de documentatie goed lezen, functionaliteiten vinden die voorkomen dat we bepaalde codeblokken zelf moeten bouwen.
Een sectie waarin deze helpers Ze zijn erg handig in de weergavesectie, omdat we hier op een meer directe manier met onze gebruikers moeten communiceren, dus we zullen zeker teksten en elementen moeten weergeven om de sectie dynamiek te kunnen geven, enz.
registerViewHelper
Zoals we waren gevorderd de registerViewHelper is een methode die ons helpt een nieuw blok te maken waarin a . is ingesloten HelperBekijkenHiermee kunnen we een instantie van de onderliggende weergave maken waarmee we toegang hebben tot de context van de bovenliggende weergave, dat wil zeggen, het zou een uitbreiding ervan zijn. Op deze manier kunnen we nieuwe functionaliteiten creëren die ons de mogelijkheid geven om meer methoden te gebruiken met minder inspanning op het moment van ontwikkeling.
Laten we het volgende voorbeeld bekijken waarin we een helper gaan genereren in een 'aan'-gebeurtenis die wordt weergegeven elke keer dat een gebeurtenis wordt aangeroepen of geactiveerd in de weergavedeclaratie. Dit geeft ons de mogelijkheid om aangepaste gebeurtenissen te genereren die de helper oproepen om onze applicatiefunctionaliteiten uit te voeren:

Laten we eens kijken hoe we een duidelijker voorbeeld kunnen maken, we gaan een teller implementeren die elke keer dat we op een knop klikken toeneemt.
Hoe het effect te realiseren?We zullen een knophelper gebruiken Thorax.js die ons zal helpen een methode aan te roepen telkens wanneer op het element wordt geklikt. Dit is wat ons in staat stelt om een ​​groter dynamisch effect te geven aan onze applicatie.
Deze code laat zien hoe we ons "aan"-evenement genereren met een aangepast evenement, vervolgens maken we een knop en plaatsen deze als trekker de "increment" -functie die overeenkomt met onze aangepaste gebeurtenis die we in de vorige regel hebben gedeclareerd.

 {{#on "verhogen"}} {{i}} {/ on}} {{#button trigger = "verhogen"}} Verhogen {{/ button}} 

Vervolgens zien we in de volgende afbeelding hoe we de code in de klasse van de bijbehorende weergave kunnen plaatsen:

Zoals we kunnen zien, hebben we samengevat wat ons meer regels code had kunnen kosten in iets heel eenvoudigs en veel gemakkelijker te debuggen en te onderhouden. Dit type structuur leent zich uitstekend om betere toepassingen te kunnen maken van een enkele pagina, waarbij de deur open blijft staan ​​om meer asynchrone elementen toe te kunnen passen.
Zoals we kunnen zien, is het heel gemakkelijk om betere ontwikkelingspatronen toe te passen, het opnemen van helpers biedt betere functionaliteiten, omdat ze al zijn ontwikkeld en gedocumenteerd door het team van Thorax.js en zijn gemeenschap kunnen we ervoor zorgen dat we een laag aantal bugs en fouten zullen hebben, en bij elke update zullen deze worden gecorrigeerd, waardoor de veiligheid van onze applicaties wordt verhoogd.