Widgets

Last ned

Markup

Markup for en widget skal inneholde attributten data-widget-id med verdien av ${element.content.id}. For widgeter som har flere instanser på siden skal dette være en verdi generert av (eksempel fra stories)

Denne id'en er koblingen mellom modellen og widgeten

class-attributtet skal ha verdien fra wrapperStyleClass som settes i kontrolleren

For å legge til felter i modellen bruker vi et json-view (noe som er feil navn - hvorfor?)

Javascript

Javascript til en widget legges i mappen widgets/[widget-navn]. Her blir det widgets/pagePreview.

Javascriptfilen skal ha det samme navnet som viewet. Her blir det default.js

    	mno.core.register({
    	    id:'widget.helloWorld.default',
            extend:[], /* optional */
            wait:[], /* optional */
            creator:function(sandbox) {
                
                function init() {
                }
        
                function destroy() {
        		}
        
                return {
                    init:init,
                    destroy:destroy
                }
            }
        });
    

Oppgave

Lag en Hello World widget og få den til å skrive ut «Hello World» med Javascript

        	sandbox.container.html('Hello World');
		

Når vi arver en widget, må vi huske på at init-funksjonen blir skrevet over.

Oppgave

Vi har et nytt view som heter «country» for Hello World widget og den skal arve den første Hello World-widgeten. Få den til å skrive ut «Hello World» med en funksjon dere legger i den første Hello World widgeten

Dere må sende med sandbox som parameter til funksjonen for å få riktig sandbox

        	extend: ['widget.helloWorld.default'];
		

Vi har tilgang til felter fra Esecnic gjennom modellen. Feltene for widgeten blir lagret i Arrayet sandbox.model. Antall items i dette arrayet bestemmes av antall instanser av widgeten. Iterer alltid over sandbox.container når du lager widgets. Viktig at du cacher this som that for å ha tilgang til this innenfor loopen.

		var that = this;
		sandbox.container.each(function(i, el) {
        	var $this = $(this), /* Dette er hver sandbox.container*/
				model = sandbox.model[i];            
        });
    

Oppgave

I Country viewet har vi lagret propertyet «country» i modellen. Hent ut dette og skriv det ut som en overskrift

        	$this.append('

' + model.country + '

';

Oppgave

Vi skal nå hente inn data fra JSONP. URL: http://lisa1.aftenposten.no/jskurs/jsonp.php?cb=

Sjekk dokumentasjonen for sandbox.getScript

For å kommunisere med andre widgeter kaster vi events. En event er et objekt som består av:

    	sandbox.notify({
        	type:'hello-event',
            data:'Hello'
        });
	

Eventet fanger vi opp av en lytter. Lytteren registreres også med et object:

    	sandbox.listen({
        	'hello-event':function (data) {
            	console.log(data);
            }
        });
    

Oppgave

I Country viewet skal fange svare med hallo nå vi klikker på knappen i default view

        	var $ = sandbox.$;
            $('button').bind('click', function () {
            	/* ... Magic... */
            });