ugrás a tartalomhoz

Prototype-on belüli foreach

s_volenszki · 2007. Szep. 21. (P), 14.34
Sziasztok!

Elkezdtem barátkozni a Prototype JavaScript FrameWork-el, és megvagyok döbbenve! Hihetetlen lehetőségeket rejt! Minden elemet a dom-ban sokkal egyszerűbb elérni és manipulálni!

Sajnos amilyen gyorsan beleszerettem, olyan gyorsan meg is süllyedtem :(! Dinamikus táblázatot akarok létrehozni AJAX-al kiolvasott adatokból. Azt a részét tökéletesen értem, hogy hogyan kell template-t csinálni, és egy egységnyi adatstruktúrával végrehajtatni, de hogyan lehet feldolgoztatni vele, előre nem meghatározott mennyiségű adat egységet?

Az id="tabla" táblához egy sor hozzáadása:

...
var myTemplate = new Template('<tr><td> #{title} </td><td> #{author} </td></tr>');
var TablaSor = {title: 'A cím', author: 'A szerző'};

new Insertion.Bottom("tabla", myTemplate.evaluate(TablaSor)); 
...
ezzel azt csináltam, hogy az AJAX-al a beérkező adatokból csináltam egy tömböt, amely tömb minden eleme megegyezik a TablaSor struktúrájával, csak más és más adatokkal van feltöltve. Megszámoltam a tömb hosszát és arra építek egy ciklus, de ez így elég lassú.

...
var TablaSorok = responseText.split(separator);
var myTemplate = new Template('<tr><td> #{title} </td><td> #{author} </td></tr>');

for(x=0;x<=TablaSorok.length-1;x++){
var TablaSor = TablaSorok[x];
new Insertion.Bottom("tabla", myTemplate.evaluate(TablaSor)); 
}
...
Hogyan lehetne ezt felturbózni? Csak egy kis útmutatást kérek, példa alkalmazást vagy doksit, kifejezetten template-en belüli ciklus építésre (for vagy foreach).

Előre is köszönöm: s_volenszki
‹ float:left-től fagy az IE 6.0? Japán karakteres title esetén IE üres lapot dob ›
 ■
1

optim

wiktor · 2007. Szep. 21. (P), 15.30
Ami általában célszerű szokott lenni ilyen cikluson belüli dom módosításnál, hogy a ciklusmagban nem közvetlenül az egész dokumentumfát módosítod, hanem csinálsz egy külön node-ot (mondjuk egy tbody-t) azt változtatod a cikluson belül, majd a ciklus után rakod be a végleges helyére. Ez szerintem sokat fog gyorsítani, persze attól függ hány sorod van.

Esetleg az is segithet, h nem stringet ("tabla") adsz at hanem magat a nodeot amit mar egyszer megkerestel. Mert itt az Insertion.Bottom az "tabla"-ra annyiszor lefuttatja a $-t, ahany sorod van. (Mondjuk ez valószínű elhanyagolható lassulás, de azért adjuk meg a módját. :)

Ha így is lassu, akkor próbáld meg kihagyni ezt a Templatet. Ha csak ez a két meződ van, akkor sima stringekből felépítesz egy html-sztinget es ciklus után hozzacsapod a tablahoz.

Sok sikert!
2

TrimPath

s_volenszki · 2007. Szep. 21. (P), 15.46
Szia!

Mostanáig TrimPath-ot használtam, de látva a Prototyp lehetőségeit át akarok térni arra. TrimPath-ban ez így nézett ki:

Megvolt ugye az adat struktúra:

var data = "{adatok:[
    {adat1:"valami1",adat2:"valami2",adat3:"valami3"},
    {adat1:"valami1",adat2:"valami2",adat3:"valami3"},
    {adat1:"valami1",adat2:"valami2",adat3:"valami3"}
    ]}";
amit ilyen módon dolgozott fel a TrimPath (csak nagy vonalakban):

<table id="tabla">
    {for p in adatok}
        <tr>
                <td width="100">${p.adat1}</td>
                <td width="100">${p.adat2}</td>
                <td width="160">${p.adat3}</td>
        </tr>
    {/for}
</table>
Arra gondoltam, hogy a prototype-nak is van valami hasonló funkciója, csak én nem ismerem.

s_volenszki
3

jaaa :)

wiktor · 2007. Szep. 21. (P), 16.35
Ilyesmi syntaxról nem tudok... :)
4

Natív js

Jano · 2007. Szep. 21. (P), 17.47
Ezt natív js is meglehetne azért oldani.

function data2Tpl(dataObj,tplStr) {
 var i;
 for (i in dataObj) {
  tplStr = tplStr.replace('##'+i+'##',dataObj[i]);
 }
 return tplStr;
}

var tableRowStr = '<tr><td> ##title## </td><td> ##author## </td></tr>';

var data = [ 
{title:"valami1",author:"valami2",adat3:"valami3"}, 
{title:"valami1",author:"valami2",adat3:"valami3"}, 
{title:"valami1",author:"valami2",adat3:"valami3"} 
];  

var tableBodyStr = "";
for (var i = 0; i < data.length; i++) {
 tableBodyStr += data2Tpl(data[i],tableRowStr)
}

alert(tableBodyStr);
És a végén mondjuk innerHTML-ezed, mert az gyors.