Knock you out

Oei, weer een impulsief projectje. JinglePalette maken, maar dan online. Html5, JQuery en KnockoutJS. Players op de pagina, start, stop, fadeout… Work in progress, maar dit zijn de lessons (re-)learned so far.

Knockoutjs

MVVM

Knockoutjs werkt met MVVM: Model-View-ViewModel. Het Model is een variabele (javascript object, een class of functie) die de specifieke gegevens die je wilt tonen op de pagina (of een onderdeel van de pagina). Dit is een lijst met velden en hun waardes. Het ViewModel bevat deze gegevens ook, aangevuld met wat algemene gegevens voor de rest van de pagina. De HTML waarin dit moet worden getoond is de View. Als je deze onderdelen hebt, kan KnockoutJS het ViewModel binden aan de html  en wordt de pagina opgebouwd:

 ko.applyBindings(myViewModel);

Databinding

In de View voeg je het attribute data-bind toe aan het element waar een veldwaarde getoond moet worden.Hierbij geeft je het type binding (bijv. ‘text’ of de attribute name) en je geeft de naam van het veld in je ViewMode mee:

<input data-bind=”value:personName” />

Normaal haal je ze met Javascript uit de DOM. Bijv.

document.getElementById("personName")

of met JQuery :

$("#personName").val()) 

Bij KnockoutJS is de HTML in de pagina (net als bijv. bij AngularJS) alleen de weergave. Je gegevens van de pagina zitten in het ViewModel.

Observables

Een veld in je ViewModel kan je als observable maken:

personName = ko.observable('Bob'). 

Hiermee houdt KnockoutJS de waarde van het veld ‘personName’ op de pagina in de gaten. Als deze in het scherm verandert, dan wijzigt deze waarde meteen in het ViewModel. Het veld met data-bind blijft verbonden, dus anderswom: wijzig je de waarde in het ViewModel, wordt dat meteen op in je pagina in de HTML aangepast.

Audio/video in HTML5

In HTML5 kan je audio of video afspelen. In de media elementen <audio>  en <video> zit het attribute “controls”: de balk met voortgang, volume en start en pauze. Ook hebben ze wel een pauze-functie, maar geen stop-functie! In plaats daarvan zet je bij pauze de positie op 0:

audioElement.pause();
audioElement.currentTime = 0;

Fadeout

Met JQuery kan je een fadeout maken (in dit geval van 1000 millisec):

audioElement.animate ({volume:0), 1000)

Als je hier de parameter “completed” met een functie aan toevoegt kan de player aan het eind van de fadeout worden bijgewerkt (pauze, teller op nul, evt. UX elementen bijwerken):

audioElement.animate({ volume: 0 }, {
           duration: 1000, complete:resetPlayer
       });

function resetPlayer() {
       var audioElement = $(this).get(0);
[ ... ]

Valkuilen

  • Als een veld omzet naar een observable, moet je die behandelen als een function. Dat betekent dus ook als je de waarde van veld ‘myViewModel.personName’ ophaalt, er () achter moet (dus ‘myViewModel.personName()’), en als je de waarde in je code wijzigt ‘myViewModel.personName(“Mike”)’. Als je dat niet doet print ie de letterlijke javascript functie.
  • knockoutjs is niet altijd klaar met renderen als je direct daarna htmlelementen zoekt…
  • JQuery heeft geen property ‘id’ bij een html object. Deze moet je ophalen met myHtmlElement.attr(‘id’);
  • Als je het attribute “controls” bij <audio> achterwege laat is je audio element niet zichtbaar!
  • In JQuery heb je het audioelement niet als je het met een selector opvraagt. Om het DOM element en dus de parameters te gebruiken in javascript, moet je nog iets dieper gaan:
var audioElement = $("#player").get(0);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s