json instead of html

Question

JavaScript

There is a user page, i.e. user wall (as on VKontakte or Facebook). With the help of "infinite scrolling" different types of content are loaded, i.e. comment, wall post, photo list, etc. The easiest way is to return html, but I would still like to work with json, you yourself understand why.

News, photo list, normal posts are the components, and the wall is the "user activity stream". In php, components communicate with each other using an internal API. But how to teach client-side components to communicate is still unclear.

Please help with advice on how best to design such functionality on the client side so that json can be used for rendering instead of html, taking into account that the components should exist autonomously, i.e. there should not be any hardcode in the "wall" component. Those. in the "wall" component should not be something like this:

if(component == 'news'){
 //отобразить новость
} elseif(component == 'comment'){
//отобразить комментарий
}

Answer 1

There are various kinds of javascript template engines, I think you should look in this direction. For example handlebarsjs.com/

Answer 2

You can load the necessary components, like this scheme:

var callback=function() {
    known_components[component_id](data);
}
if (!known_components[component_id]) {
    load_component_js_from_server(component_id, callback)
} else {
    callback();
}

Answer 3

Can I get an example json to better understand the situation?

Answer 4

Or maybe generate HTML on the server and then convert it to json?

Answer 5

Events to say.
In transport, on getting json something like this:

app.trigger('load'+data.component,data)

In components for this event:

app.on('loadNews',function(data){/*парсим шаблон*/})

Answer 6

Try looking away:
icanhazjs

Answer 7

It seems to me that it's time for you to start digging some kind of javascript framework. Like Backbone , Knockout , etc. _
According to templating engines - the lightest and fastest Dot.js