Share
Att skapa datadrivena användargränssnitt är en av de mest komplexa jobben hos en webbutvecklare. Det kräver noggrann hantering mellan gränssnittet och dess underliggande data. Tänk på en enkel kundvagn för en e-handelswebbplats. När användaren tar bort ett objekt från kundvagnen måste du ta bort objektet från den underliggande datasatsen, ta bort det associerade elementet från kundvagnens HTML-sida och uppdatera det totala priset. För alla utom de mest triviala applikationerna, är det en felaktigt strävan att bestämma vilka HTML-element som är beroende av en viss datauppgift.
Figur 1: Manuell spårning av beroenden mellan HTML-element och deras underliggande data Knockout.js JavaScript-biblioteket ger ett renare sätt att hantera sådana komplexa, datadrivna gränssnitt. I stället för att manuellt spåra vilka delar av HTML-sidan som är beroende av de drabbade uppgifterna, kan du med Knockout.js skapa en direkt koppling mellan underliggande data och dess presentation. Efter att ha länkat ett HTML-element med ett visst dataobjekt, är alla ändringar i det objektet automatiskt återspeglas i DOM.
Figur 2: Spårning av beroenden automatiskt med Knockout.js Detta gör att du kan fokusera på data bakom din ansökan. När du har skapat dina HTML-mallar kan du bara arbeta med JavaScript-dataobjekt. Med Knockout.js behöver du bara ta bort ett objekt från kundvagnen genom att ta bort det från JavaScript-matrisen som representerar användarens kundvagnsobjekt. De motsvarande HTML-elementen kommer automatiskt att tas bort från sidan och det totala priset omräknas.
Med ett annat sätt kan Knockout.js skapa en självuppdaterad skärm för dina JavaScript-objekt.
Men det är inte allt Knockout kan göra. Förutom automatisk beroendeuppföljning har den flera stödfunktioner för snabb utveckling av mottagliga användargränssnitt ...
Knockout.js är en klientsidan bibliotek skrivet helt i JavaScript. Detta gör det kompatibelt med praktiskt taget alla serverprogramvaror, från ASP.NET till PHP, Django, Ruby on Rails, och till och med specialbyggda webbramar.
När det gäller fronten kopplar Knockout.js den underliggande datamodellen till HTML-element genom att lägga till en enda HTML-attribut. Det betyder att det kan integreras i ett befintligt projekt med minimala förändringar i din HTML, CSS och andra JavaScript-bibliotek.
Medan Knockout.js skickas med nästan två duss bindningar för att definiera hur data visas kan du fortfarande hitta dig själv som behöver ett applikationsspecifikt beteende (till exempel en stjärnklassig widget för användarinfordrade filmrecensioner). Lyckligtvis gör Knockout.js det enkelt att lägga till egna bindningar, vilket ger dig fullständig kontroll över hur dina data omvandlas till HTML. Och eftersom dessa anpassade bindningar är integrerade i det grundläggande templerande språket är det trivialt att återanvända widgets i andra delar av din ansökan.
Figur 3: Återanvända en anpassad bindning i flera användargränssnittskomponenter Knockout.js levereras med flera verktygsfunktioner, inklusive array-filter, JSON-analysering och till och med ett generellt sätt att kartlägga data från servern till en HTML-vy. Dessa verktyg gör det möjligt att vända stora mängder data till ett dynamiskt användargränssnitt med bara några rader kod.
Knockout.js är inte menade att vara en ersättare för jQuery, Prototype eller MooTools. Det försöker inte ge animering, generisk händelsehantering eller AJAX-funktionalitet (dock kan Knockout.js kan parse data som tas emot från ett AJAX-samtal). Knockout.js är enbart inriktad på att utforma skalbara, datadrivena användargränssnitt - hur den underliggande data erhålls är helt upp till dig.
Figur 4: Knockout.js kompletterar en hel webbapplikationsstack Den här höga specialiseringen gör Knockout.js kompatibel med andra klientsidor och serverns-teknik, men det betyder också Knockout.js kräver ofta samarbete med en mer komplett JavaScript-ramverk. I den meningen är Knockout.js mer av a tillägg till en traditionell webbapplikationsstack, snarare än en integrerad del av den.
När du är redo, gå vidare till lektion en!
Denna lektion representerar ett kapitel från Knockout Succinctly, en gratis eBook från laget på Syncfusion.
Accentsconagua