Hi folks,
I'm not an expert on front-end development and if this is the wrong
group to post, please point me in the correct direction.

I'm looking at ways to separate the HTML layout of a page in
javascript from JSON data that I receive from the server. What are the
ways to render the JSON on the client?

Most of the code samples I've seen involve displaying the received
JSON seem to have an intimate knowledge of how the html is laid out
and which elements and types used to display the data. Typically what
I see is something similar to:

function makeHttpRequest()
{
        httpRequest.open("GET", url, true)
        httpRequest.onreadystatechange = updatePage;
        httpRequest.send();
}

function updatePage() {
   if (xmlHttp.readyState == 4) {
                eval("var response = ("+request.responseText+")");

                for(var i in response.data.row.items)
                {
                    document.getElementById("body").innerHTML += "<div
id='icon'><img src='"+response.data.row.items[i].icon +"'/></div>";

                    for(var j in response.data.row.items[i].item)
                    {
                        document.getElementById("body").innerHTML += "<div 
id='item'
onclick=\""+ response.data.row.items[i].action +"\">"+
response.data.row.items[i].item[j] +"</div>";
                    }
                }
        }
}

Assuming that our view consists simple HTML with separate javascript &
CSS files, this approach seems to intrinsically cause coupling of the
markup with javascript. Following this approach, every section of a
page that needs to fetch data from the server would have a different
'updatePage' to handle the response. In addition, if the layout of the
page changed from a 'div' to some other type of tag, you have to
remember to go and modify the javascript.

I've read about the 'Template' object under prototype  and I suppose
one thing you could do is have the server send back template string
and with the id of the element to update along with rest of the JSON
data and then use it after deserializing the data.

Is there a better way to achieve this separation using prototype/
scriptaculous?

Thanks,
Justin

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to