Jeg sad på NDC for en måned siden, og så Phil Haack præsenterer: Black Belt Ninja Tips. En af de ting som jeg blev mest facineret af var da han præsenterede MVC frameworkets clientside databindings mekanisme. Det var helt utroligt smart: Man skulle blot inkluderer 3 script-referencer, og så var man kørende. Man kunne så lave sin Html med VS.NET, og så lade browseren renderer data på klienten efter et jQuery-Ajax kald. Syntaksen var nogenlunde sådan:

<select id="myDD">
 <option value="{id}>{name}</option>
</select>

Det er jo en dejlig måde at gøre det på, og det appelerer bestemt til mig, men 3000 linjers script? Jeg har en dyb skepsis ,for ting der er så voldsomme. Det viser sig gang på gang, at man ved at bruge disse mastodonter, får en masse, som man bare ikke bruger, og i værste fald er man dækket dobbelt ind med funktionalitet.

Jeg overvejede om man ikke selv kunne gøre det lidt nemmere. Jeg mener: Hvis man ser på Html-syntaksen, så er den jo ikke så fjern fra den syntaks jeg brugte i mit tidligere indlæg om streng-formatering. Her er bare tale om at man i stedet for index, bruger navne (properties). Hvis jeg lige skriver min format funktion om til at tage navne i stedet:

var re = /\{([^\}]+)\}/g;

Nu laver den capture på navne omsluttet af klammer. Jeg laver den til en extension på String objektet og kalder den bind, for den skal nu tage et objekt ind i stedet for en array.

String.prototype.bind = function(item) {
    var re = /\{([^\}]+)\}/g;

    return this.replace(re, function() {
        return item[arguments[1]];
    });
};

Nu kan man altså foretage kald til bind på følgende måde:

var udtryk = "Hej {name}, du scorede: {point} p";
var data = [{name: "Jesper", point: 256}, {name: "Signe", point: 201}, {name: "Benny", point: 254}];

// data kan være et hvilket som helst liste af objekter der er json serialiceret fra serveren

udtryk.bind(data[0]);
// Hej Jesper, du scorede: 256 p

Nu har jeg de byggesten der skal til at lave en databindingsplugin til jQuery: Bindingssyntaks og bindingsfunktion.

Nu skal det blot pakkes ind i en simpel plugin. I følge jQuery dokumentatinonen gøres det ved af man tilføjer sit plugin til jQuery.fn. Så det gør jeg så:

(function($) {
    $.fn.databind = function(data) {
        return this.each(function() {
            // Setup
            var $container = $(this).parent();
            var bindingExpression = $container.html();

            // Fjern template
            $container.empty();

            // Bind
            for (var i = 0; i < data.length; i++) {
                $container.append(bindingExpression.bind(itm));
            }
        });
    };
})(jQuery);    

Nu kan jeg altså foretage databinding med jQuery og førstnævnte html syntaks:

$("#myDD option").databind(data);

Vær opmærksom på: 

• At man skal udvælge det element der skal gentages ved databinding (I dette tilfælde option-elementet).
• At der kun er et element på det niveau i DOM’en, da vi tager parent-elementets innerHTML og bruger som bindingsudtryk.
• At man kun kan kalde bind på elementet een gang, da det fjernes fra DOM’en.

Nu ved jeg godt at disse simple funktioner ikke kan det samme som det framework som Phill præsenterede, men det er nu påfaldende hvor simpelt det kan gøres.

Code on…