Inhoudsopgave
Backbone.js Het is gebaseerd op de MVC-structuur, naast het hebben van: modellen, heeft ook keer bekekenVolgens de filosofie van deze softwareconstructiearchitectuur zijn de views degene die de verantwoordelijkheid hebben om de gebruiker de gegevens te tonen die worden gegenereerd tussen de controller en het model, afhankelijk van het verzoek dat is gedaan.In Backbone.js dit werkt iets anders, de weergave bevat geen elementen die de gebruiker direct ziet, maar communiceert de gegevens via een sjabloon-engine.
De weergaven in Backbone.js
In Backbone.js de weergaven als zodanig bevatten geen HTML-taal die aan de gebruiker van onze applicatie kan worden getoond, integendeel, ze bevatten de logica die ons in staat zal stellen de werking van het voorste deel van de applicatie die we ontwikkelen te bouwen met behulp van het model als een basis, dat wil zeggen, wat we in het model hebben, we gaan het in de weergave manipuleren, zodat we twee actieniveaus hebben.
Om gegevens weer te geven gebruiken we de render () methode waarmee we de gegevens van onze weergave kunnen doorgeven aan een sjabloon, die sjabloon is gebouwd in een of andere motor van Javascript-sjablonen bijvoorbeeld: Underscore, Moustache, JQuery-tpml, etc.
Creatie bekijken
Tot maak een weergave We volgen een vrij direct proces en vergelijkbaar met het maken van een model, om de weergave te genereren waarvan we alleen maar hoeven uit te breiden Backbone.Bekijken, laten we eens kijken hoe dit zich gedraagt wanneer we het uitvoeren op onze chromen console een HTML-bestand gebruiken met de bibliotheken van Backbone.js, jsquery Y laag streepje al geladen.
Laten we eerst de code bekijken die we in onze console zullen plaatsen:
var TodoView = Backbone.View.extend ({tagName: 'li', // Cache de sjabloonfunctie voor een enkel item. todoTpl: _.template ("Een voorbeeldsjabloon"), events: {'dblclick label':' edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Genereer de bijschriften van het label van het element. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('.edit'); return this;}, edit: function () {// Het wordt uitgevoerd als je klaar bent dubbelklik op de} tag, sluit : function () {// het wordt uitgevoerd wanneer de focus van het element wordt verwijderd}, updateOnEnter: function (e) {// het wordt uitgevoerd wanneer een toets wordt ingedrukt in de bewerkingsmodus, // wacht echter tot enter is ingedrukt om in actie te komen}}); Zoals we kunnen zien, nadat we de verlengen overeenkomstig zijn we een aantal attributen aan het initialiseren die ervoor zorgen dat onze weergave werkt, bovendien plaatsen we in elk element de opmerkingen zodat we weten hoe het werkt.
Laten we nu in de console kijken wat er gebeurt als we de weergave aanroepen:
Hiermee sluiten we deze tutorial af waarmee we al een stap vooruit hebben gezet in wat overeenkomt met het genereren van views in een MVC applicatie met Backbone.js.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
