JS framework that provides two-way binding with server-side rendered htmls?

Is there any JS framework that provides two-way binding with server-side rendered htmls? Like Angular/Ember but instead of rendering html at client-side only update server-side generated html.

I like to keep html pages viewable without JS and only use JS to make them interactive. I'm using jQuery right now but manual pulling and pushing data from and to view is cumbersome.

We've been looking for this for a while, and have started exploring rivets.js to do this.

On the server side, we:

  • render HTML with "special prefixed attributes" that rivets requires
  • send the JSON for the models used on the page in <script> tags (aka bootstrapping)

On the client side, we:

  • organize our code with Backbone
  • bind the bootstrapped model with the <div>s that contain the rendered representation of the model

Rivets manages the bindings.

This is still pretty experimental, so I'll update this answer when we understand the tradeoffs and performance better.

I can't speak to Ember, so I'll answer as an active member of the AngularJS community.

Angular and Ember are principally client-side MVC frameworks, so using them outside of that may not make a lot of sense. AngularJS, for example, provides leaps and bounds more than just two-way data binding.

Even if you got it to work, it would be overkill. They're designed for building web apps, not web pages. I would argue JavaScript MVC frameworks are not suitable to simply "make [a page] interactive". Besides, jQuery already does that quite well, and you could use a templating engine to accomplish some of the data binding.

But I'm a huge fan of AngularJS and client-side MVC in general, so I'd like to be a little more helpful:

  • Can you provide some insight into why you're looking at AngularJS and Ember?
  • What do you want to do that you can't already to in jQuery?
  • Why do you want to augment a web page rather than design more of a web app?

What you are looking for is framework designed to use __Progressive Enhancement

Ember.js and Angular take a very different approach. Given your requirement that "to keep html pages viewable without JS" neither would be a good choice. For sure using jQuery is an option, but like you say it can be cumbersome. Might be worth reconsidering that requirement.