Kliens oldali adatkötés

Úgy tűnik, hogy a Microsoft AJAX Library fejlesztői nem szimplán a konkurenciát akarták lenyomni, hanem tényleg azt tartották szem előtt, hogy egy JavaScript osztálykönyvtárban milyen funkciókra van szükség. Van például benne kliens oldali adatkötés! Persze felmerül a kérdés, hogy szép, de mire jó? 

Miután aszinkron módon megszereztünk adatokat a szervertől, azokat valahogy meg is kéne jeleníteni. Erre a hagyományosan kétféle megközelítés képzelhető el:

  1. A szerver szépen megformázza az adatokat, eleve HTML fragmentet küld a kliensnek, amely azt az innerHTML tulajdonság segítségével egyszerűen megjeleníti.
  2. A kliens végigiterál a valamilyen formában (XML, JSON) leküldött adatokon és sztring vagy DOM buherálással létrehozza az új felhasználói felület elemeket (DIV-eket, SPAN-eket, listákat, táblázatokat)

Ehhez jön most a harmadik lehetőség: egyszerűen kössük hozzá a szerver által küldött adatokat kliens oldali felhasználói felület elemekhez. A szervernek így nem kell formáznia, a kliensre pedig nem kell kódot írnunk, a szükséges buherálást az adatkötés mögöt rejtőző AJAX Library fogja elvégezni (mert valakinek mégis csak meg kell tennie).

Első lépésként szükségünk lesz valamilyen adatforrásra. Az adatok jöhetnek a szerverről is, de hogy egyszerűbb legyen a példa, egy objektum tömböt fogunk használni, amit JSON-ból inicializálunk:

    var result = 
    [
      { Name: "Balássy György", Url: "http://balassy.spaces.live.com", ImageId: "0959d967-329e-49bb-903f-6ca5a9c88e52" },
      { Name: "Gincsai Gábor", Url: "http://www.aut.bme.hu/portal/gincsai", ImageId: "43a1bf97-0b07-4a41-a563-b34dc3f3d2d7" },
      { Name: "Dávid Zoltán", Url: "http://www.aut.bme.hu/portal/dzoli", ImageId: "04b3c904-6323-4c1c-a729-01ff5b543351" },
      { Name: "Kereskényi Róbert", Url: "http://www.aut.bme.hu/portal/roby", ImageId: "408778ae-1749-4252-a04d-5c416acaf0a7" },                                        
      { Name: "Virág András", Url: "http://www.aut.bme.hu/portal/viragand", ImageId: "" }
    ];

Minden objektumnak van Name, Url és ImageId tulajdonsága, amit kötnünk kell.

A szerver oldali kötéshez hasonlóan itt is meg kell adnunk template-eket, azonban itt a template és a kötés nem együtt, hanem az oldal különböző részein találhatóak. Listát szeretnék létrehozni, ehhez a következő template megfelelő lesz:

    <div id="output"></div>
    
    <div style="display: none;">
        <div id="listLayout">
<h1>MSDN Kompetencia Központ Portál Technológiák Csoport</h1> <ul id="itemParent"> <li id="item">
<img id="photo" style="height:50px;width:40px;" />
<a id="name"></a>
</
li> </ul>
<a href="http://www.devportal.hu/Portal/Webdevelopment.aspx"> devPORTAL Webfejlesztés témaközpont </a> </div> </div>

Az output azonosítójú taget fogjuk arra felhasználni, hogy ott megjelenítsük a listánkat, a második DIV pedig maga a template, amit a kötéshez fogunk felhasználni. Itt is el kell látni néhány elemet tetszőleges id-val, hogy a kötésnél hivatkozni tudjunk rájuk:

  • listLayout: Ez lesz az egész listánk sablonja, ezen belül tudunk megadni például fejlécet és láblécet.
  • itemParent: Ez lesz az egyes rekordjainkat tartalmazó konténer, tehát ami ezen belül van, az elemenként ismétlődik, ami pedig ezen kívül van, az fejléc vagy lábléc.
  • item: Az egyes rekordok adatait összefogó elem.
  • photo, name: Az adatkötésnél így fogunk hivatkozni a rekordonként megjelenő IMG és A tag-ekre.

Az adatkötést XML Scriptben írjuk le, mert sokkal átláthatóbb, mint soronként beállítani minden tulajdonságot:

  <script type="text/xml-script">
    <page xmlns="http://schemas.microsoft.com/xml-script/2005">
      <components>
        <listView itemTemplateParentElementId="itemParent" id="output">
          <layoutTemplate>
            <template layoutElement="listLayout" />
          </layoutTemplate>

          <itemTemplate>
            <template layoutElement="item">
              <hyperlink id="name">
                <bindings>
                  <binding dataPath="Name" property="text" />
                  <binding dataPath="Url" property="navigateURL" />
                </bindings>
              </hyperlink>
              <image id="photo">
                <bindings>
                  <binding dataPath="ImageId" property="imageURL" 
                    transform="ToString" 
                    transformerArgument="http://www.aut.bme.hu/Portal/Default/DesktopModules/PictureResolver.aspx?PictureId={0}&amp;CultureId=16df90ec-fcf2-466d-8f3e-8c4057561621" />
                  <binding dataPath="Name" property="alternateText" />
                </bindings>
              </image>
            </template>
          </itemTemplate>
        </listView>
      </components>
    </page>
  </script>

 Kis segítség az XML megértéséhez:

  • Az adatkötéshez a Sys.Preview.UI.Data.ListView kontrollt használjuk, ami a PreviewScript.js fájlban található.
  • A ListViewban az egyes elemek sablonját (hasonlóan a szerver oldali kötéshez) egy item template segítségével írjuk le.
  • Az itemen belül lévő A tag-et egy Sys.Preview.UI.HyperLink (<hyperlink>), az IMG tag-et pedig egy Sys.Preview.UI.Image (<image>) kontroll segítségével kötjük. A linknek text és navigateURL tulajdonsága van, a képnek imageURL és alternateText.
  • Az adatkötés WPF jellegű, a következő tulajdonságokat lehet beállítani:
    • dataContext: az adatforrás objektum neve. Itt nem szerepel, mert ezt kódból fogjuk megadni.
    • dataPath: az adatforrás forrás tulajdonsága ("ezt kötjük…").
    • property: a cél vezérlő elem cél tulajdonsága ("… ehhez").
    • transformer: transzformációt végezhetünk az adatokon, mielőtt megérkeznének a cél tulajdonsághoz. A ToString transzformer lényegében egy String.Format művelet, amelynek szüksége van egy {0} placeholderre.
    • transformerArgument: a megadott transzformációhoz szükséges paramétereket tudjuk átadni. Példánkban azt a mintát, amelyben egy {0} placeholder helyére kerül be az adat.

Nem marad más hátra, mint a result változóban lévő adatokat a kontrollhoz kötni a data tulajdonságon keresztül:

    $get( 'output' ).control.set_data( result );

Persze ezt is megtehetjük deklaratívan a Sys.Preview.Data.DataSource osztály segítségével, ám ez leginkább akkor hasznos, ha szerver oldali webszolgáltatást akarunk hívni.

Van tehát egy deklaratív, tisztán kliens oldalon futó adatkötésünk, ami lényegesen átláthatóbb és karbantarthatóbb, mint az egymásba ágyazott for-ciklusok. Sőt, az eredményt lehet kliens oldalon rendezni is, de erről majd legközelebb… smile_wink

 

Technorati tags: , ,
Reklámok

One thought on “Kliens oldali adatkötés

  1. Visszajelzés: Ne várakoztasd a felhasználót: jQuery Templates és ASP.NET PageMethods « Balássy György szakmai blogja

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s