django - What's the best way to convert server side HTML into a Javascript MVC on page load? -

i'm trying build quick , dirty javascript library makes easy work initial server generated html pages , performing further actions in javascript.

my issue most javascript mvc solutions out there, both frameworks , patterns, rely on separating data html returned server. argument here works better building , structuring full web app.

however, slow down page load , make search engines , other non-javascript clients can't use site.

rather figuring out way of running js on server side pre-generate page, i'd instead make js read dom on page load , create initial object state off of this.

i'm using django , plan make templates work in both jinja , modified version of handlebars.

this way i can render templates same code on server side , in js. part i'm missing here how make js can build it's object representation off of dom on page load.

here's i'm thinking right templates:

<div class="post" js-model="post.id" js-value="{{ id }}">     <div class="post-header">         <span js-model="post.author.username" js-value="{{ author.username }}">             {{ author.username }}         </span>         <img src="{{ author.avatar }}" js-model="post.author.avatar" js-value="{{ author-avatar }}">     </div>     <p js-model="post.content" js-value="{{ content }}">         {{ content }}     </p>     <div js-model="post.date" js-value="{{ date }}" class="post-footer">         {{ date }}     </div> </div> 

my javascript read , generate internal representation of object.

i might way on thinking , better off doing angular, feedback on see others think.

there's lot of thought going along lines these days.

the airbnb folks came rendr

and artsy came ezel

neither mature , both benefit more minds contributing.

also, it's no coincidence both use backbone , node. using framework angular or ember might prohibitively difficult on server compared backbone. , if you're going render in js on server, makes more sense use js server.