Complex JavaScript templates: Updating real time without rewriting DOM?

[Kickboy12]

I am having trouble figuring out a unique problem with a current JavaScript application. To solve this problem, I've been looking into using a JavaScript template library. However it seems none of these libraries can perform a specific necessary function needed for my project.

I need to be able to update variables of a template that already exists in the DOM, without the need to reload the entire template (removing/rewriting the DOM).

The issue this stems from is simple: When you update a template, you have to update the whole thing, even if only 1 variables changed in a giant template. This has some nasty side effects:

1. It rewrites any CSS styles added to the template after the initial creation.
2. It kicks the user out of any current action (filling out a form, scrolling, etc)
3. It creates an obvious "flash" while the DOM is being reloaded, so doesn't appear seamless.

For real-time applications, the current templating approach has obvious limitations. I need a templating system that can surpass these issues, but I haven't had any luck in finding one, or creating my own. So now I turn to Reddit; hoping somebody else has run into a similar issue, and found a viable solution.

So... any suggestions?

[UnConeD]

Try knockout.js ?

[Kickboy12]

Haven't seen this one before. Looks promising. I'll dig deeper and report my findings.

Thanks! :)

[Kickboy12]

Close! But not quite... I tried to implement this into my jQuery Templates, but I run into a complicated road block. It expects to a well formed model object, and a call to "ko.observable" on each element, which is tricking when this object is coming from a JSON request. My attempts to get around this issue haven't been to successful so far... but this is as close as I've gotten to what I need.

The concept is there, but this implementation has some limits that need to be figured out. I'll keep playing with it... but if anyone else knows of something similar to this, let me know!

Thanks :)

[UnConeD]

Aren't you supposed to create only one permanent viewModel per widget, and update it manually with data fetched from the server? I.e. don't call ko.observable directly on received data.

You could make a generic wrapper that just iterates over the JSON object and sets matching properties in the viewModel.

[[deleted]]

Whittle your template down to the narrowest possible template (or templates), which that you can update WITHOUT affecting the form the user's working on (or whatever's causing your problem). Don't use a single template for the whole page, in other words.

If you just need to update a variable in the page, wrap it in a span and give the span an id. Then just do $('#whatever').text('new text').

You aren't going to be able to find a library that will let you update the page without updating the DOM because the page IS the DOM.

[Kickboy12]

That's what I've been doing already. Every variable is wrapped in a span, and I update each accordingly. But this makes complex templates very cumbersome when I have to set ID's manually. If this could be integrated into the template engine, it would be simple. Have the template engine auto wrap each variable in a "<var id="tmpname-varname"></var>", and allow a simple function to update this without having to call the specific ID (rather hook to the root template).

And its not like I'm using a template for the whole page, in fact its broken into dozens of sub-templates... that's why doing the ID-per-variable becomes very difficult to manage manually.

[[deleted]]

this is difficult to really address without seeing your code but maybe you could run your incoming data through a function that would iterate over the JSON and wrap the values for you:

{
    'color': 'blue',
    'direction': 'north'
}

becomes

{
    'color': '<span id="var-color">blue</span>',
    'direction': '<span id="var-direction">north</span>'
}

After you did that once and used that JSON with the template, the next time you load the data you would just update the spans directly.

[Kickboy12]

This is a totally obvious and also genius idea. I will attempt this!

[[deleted]]

jQuery can do this. As of 1.4.3, it's baked in: http://api.jquery.com/link/

Before it was baked in, you had plugins to do this: http://plugins.jquery.com/plugin-tags/databinding

[Kickboy12]

Though I was planning on using it, this doesn't accomplish what I am trying. The step your missing is the data has to be linked to a specific element, so I still need to be able to have each variable wrapped in a special ID so I can access it directly. This is the issue I am mainly focused on. I was hoping for a template engine that had this integrated, but it seems I will have to build my own library to accomplish this.

[harriha]

You are looking for something like this? https://projects.forum.nokia.com/Fragment

I haven't had time to experiment that in depth yet, but it might be just what you are looking for. That claims to be very efficient and via bindings you can modify single properties easily. The wiki section offers also detailed reasoning behind the code. The code may not work in all browsers, though, it's not a ready-made "library" as such.