Share
Backbone wordt razend populair als een framework voor webapplicatieontwikkeling. Samen met deze populariteit komen talloze uitbreidingen en plug-ins om de kracht van het frame te verbeteren en gaten in te vullen die andere vilten nodig hadden om te vullen. Laten we een paar van de beste keuzes bekijken.
Ontwikkeld door Derick Bailey, deze extensie is vrij groot en is mijn persoonlijke favoriet. In plaats van het toevoegen van een of twee functies aan Backbone, besloot Derick alle grootste gaten in te vullen waarvan hij dacht dat deze bestonden. Hier is wat hij zegt in het readme-bestand van het GitHub-project.
"Backbone.Marionette is een samengestelde toepassingsbibliotheek voor Backbone.js die de constructie van grootschalige JavaScript-toepassingen wil vereenvoudigen. Het is een verzameling gemeenschappelijke ontwerp- en implementatiepatronen in de toepassingen die ik (Derick Bailey) met Backbone heb gebouwd , en bevat verschillende stukken geïnspireerd op composiet-applicatie-architecturen, zoals Microsoft's "Prism" -raamwerk. "
Laten we eens nader bekijken wat Marionette ons biedt:
Ik heb alleen de oppervlakte van wat Marionette kan doen gekrast. Ik raad zeker aan om naar GitHub te gaan en hun documentatie op de Wiki te lezen.
Bovendien dekt Andrew Burgess Marionette in zijn cursus Tuts + Premium Advanced Backbone Patterns and Techniques.
Backbone.Validation is ontworpen om een kleine niche van een probleem te vullen: namelijk modelvalidatie. Er zijn verschillende validatie-uitbreidingen voor Backbone, maar deze lijkt het meeste respect uit de community te hebben gekregen.
In plaats van echt een te moeten schrijven bevestigen methode voor uw modellen, kunt u een bevestiging eigenschap voor uw modellen. Dit is een object dat elk kenmerk aangeeft dat u wilt valideren en een lijst met validatieregels voor elk van die kenmerken. U kunt ook foutberichten voor elk kenmerk opgeven en aangepaste functies doorgeven voor het valideren van één attribuut. U kunt een voorbeeld hieronder zien, dat is aangepast van een van de voorbeelden op hun website.
var SomeModel = Backbone.Model.extend (validation: name: required: true, 'address.street': required: true, 'address.zip': length: 4, age: range: [1, 80], e-mail: pattern: 'email', // voer uw eigen foutmelding in msg: "Vul alstublieft een geldig e-mailadres in", // aangepaste validatiefunctie voor 'someAttribute' someAttribute: function (value) if (value! == 'somevalue') return 'Foutmelding';);
Er zijn talloze ingebouwde validators en patronen die u kunt controleren, en er is zelfs een manier om de lijst uit te breiden met uw eigen globale validators. Deze Backbone-plug-in maakt niet echt validatieplezier, maar het elimineert zeker alle excuses voor het niet toevoegen van validatie. Bezoek hun site voor meer voorbeelden en een diepere uitleg over het gebruik van deze geweldige tool.
Backbone.LayoutManager draait helemaal om het verbeteren van Backbone's Views. Net als Backbone.Marionette, wordt er een opschooncode ingevoerd om geheugenlekken te voorkomen, wordt alle boilerplate verwerkt en blijft alleen de configuratie- en applicatiespecifieke code over. In tegenstelling tot Marionette richt LayoutManager zich specifiek op Views.
Omdat LayoutManager zich uitsluitend op Views richt, kan het meer doen voor de views dan Marionette. LayoutManager kan bijvoorbeeld asynchrone weergave uitvoeren, in het geval dat u uw sjablonen dynamisch wilt laden vanuit externe bestanden.
LayoutManager kan ook subvisies aan, hoewel op een heel andere manier dan Marionette. Hoe dan ook, het is grotendeels een configuratie, waardoor dingen extreem eenvoudig zijn en 90% van het werk dat je zou moeten doen, zou verdwijnen als je dit allemaal alleen zou proberen te implementeren. Bekijk hieronder een eenvoudig voorbeeld voor het toevoegen van drie subweergaven aan een weergave:
Backbone.Layout.extend (views: "header": nieuwe HeaderView (), "sectie": nieuwe ContentView (), "footer": nieuwe FooterView ());
Ga zoals gebruikelijk naar de GitHub-pagina en documentatie voor meer informatie.
Backbone.ModelBinder maakt koppelingen tussen de gegevens in uw modellen en markeringen weergegeven door uw weergaven. U kunt dit al doen door zich aan de wijzigingsgebeurtenis op uw modellen te binden en de weergave opnieuw weer te geven, maar ModelBinder is efficiënter en eenvoudiger in gebruik.
Bekijk de onderstaande code:
Accentsconagua
var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Old Backbone.js manier this.model.on ('change', this.render, this); / / of de nieuwe Backbone 0.9.10+ manier this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ()));); Het probleem met deze aanpak is dat elke keer dat een enkel kenmerk wordt gewijzigd, we de hele weergave opnieuw moeten renderen. Ook moeten we bij elke render het model converteren naar JSON. Als ten slotte de binding bidirectioneel is (wanneer het model wordt bijgewerkt, dus ook de DOM en andersom), moeten we nog meer logica toevoegen aan het beeld.
Dit voorbeeld gebruikte Underscore's sjabloon functie. Laten we aannemen dat de sjabloon die we erin hebben ingevoerd er zo uitziet:
De tags gebruiken <%= en %> Maak de sjabloon functie vervang die gebieden door de Voornaam en achternaam eigenschappen die bestaan in de JSON die we vanuit het model hebben verzonden. We nemen aan dat het model beide attributen ook heeft.
Met ModelBinder kunnen we die template-tags verwijderen en normaal verzenden HTML. ModelBinder ziet de waarde van de naam attribuut op de invoer tag en wijst de waarde van het model voor die eigenschap automatisch toe aan de waarde kenmerk van de tag. Bijvoorbeeld de eerste invoer's naam is ingesteld op "firstName". Wanneer we ModelBinder gebruiken, zal het dat zien en vervolgens instellen invoer's waarde naar de modellen Voornaam eigendom.
Hieronder ziet u hoe ons vorige voorbeeld er uit zou zien na het overschakelen naar het gebruik van ModelBinder. Realiseer je ook dat de binding bidirectioneel is, dus als het invoer tags worden bijgewerkt, het model wordt automatisch voor ons bijgewerkt.
HTML-sjabloon:
JavaScript-weergave:
var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // Geen binding meer hier, render: function () // Gooi de HTML recht hierin. $ el.html (this .template); // Gebruik ModelBinder om het model te binden en modelBinder.bind te bekijken (this.model, this.el););
Nu hebben we schone HTML-sjablonen en we hebben maar één regel code nodig om de HTML van de weergave en de modellen samen te gebruiken modelBinder.bind. modelBinder.bind neemt twee vereiste argumenten en één optioneel argument. Het eerste argument is het model met de gegevens die aan de DOM worden gebonden. De tweede is het DOM-knooppunt dat recursief zal worden doorzocht, op zoek naar te maken bindingen. Het laatste argument is a verbindend object dat geavanceerde regels opgeeft voor hoe bindingen moeten worden gedaan, als u het standaardgebruik niet bevalt.
ModelBinder kan op meer dan alleen worden gebruikt invoer -tags. Het werkt op elk element. Als het element een bepaalde vorminvoer is, zoals invoer, kiezen, of textarea, het zal de waarden van dat element dienovereenkomstig bijwerken. Als u een element bindt, zoals a div of span, het plaatst de gegevens van het model tussen de openende en sluitende tags van dat element (bijv. [data gaat hier]).
Achter Backbone.ModelBinder zit meer dan wat ik hier heb gedemonstreerd, dus lees de documentatie in de GitHub-opslagplaats om er alles over te leren.
Dat slaat de boel op. Ik heb maar een handvol extensies en plug-ins behandeld, maar dit is wat ik beschouw als het meest nuttig.
Het Backbone-landschap verandert voortdurend. Als je een uitgebreide lijst met de verschillende Backbone-extensies wilt bekijken die beschikbaar zijn, ga je naar deze wiki-pagina, die het Backbone-team regelmatig bijwerkt.
