search

flatiron / plates

Light-weight, logic-less, DSL-free, templates for all javascript environments!
MIT License
831 stars 69 forks source link

Performance concern regarding browser usage (not server-side Node). #86

Open trusktr opened 12 years ago

trusktr commented 12 years ago

Does Plates have the ability to modify the DOM directly (as opposed to parsing a template string)?

For example, let's say our <body> element contains the entire template. I could use jQuery and do something like

var html = $('body').html(); //using jQuery
var data = { "test": "New Value", "etc":"foobar", "add":"10 more data items here"  };

var output = Plates.bind(html, data);

$('body').html(output); // useing jQuery, inefficient

but that replaces the entire contents of <body> (destroys the DOM the recreates a new one), which would be much less efficient than just modifying specific parts inside <body> where changes need to happen.

Does plates have a mechanim whereby it will crawl through the DOM and make changes only where needed?

It's inefficient to grab the body's html then replace it entirely with new html. It'd be more efficient for Plates to make the changes at the lower-most levels possible, right where the changes need to happen.

If Plates has no such mechanism, I'd like to make that my feature suggestion.

Such a feature would make Plates the best template engine ever (for JavaScript) in my humble opinion. :D

Perhaps the Plates.bind() method can also accept a dom element instead of a string. Usage might be like this:

var data = { "test": "New Value", "etc":"foobar", "add":"10 more data items here"  };

Plates.bind( $('body')[0], data ); // Here we pass a `domElement` to Plates.bind()

Alternatively, if Plates were to support jQuery, it'd be like this:

var data = { "test": "New Value", "etc":"foobar", "add":"10 more data items here"  };

/*
 * Here we pass a jQuery object to Plates.bind().
 * Each element in the set of matched elements will be considered a template.
 */
Plates.bind( $('body'), data );
trusktr commented 12 years ago

I suppose I can write code in my web app to target specific lower-most elements then replace their HTML with the parsed result from Plates. I guess my feature suggestion would just be a safe guard against inefficient programming.

fatlotus commented 11 years ago

I'd second this feature request: I do a lot of evented (comet) applications, and I often find the need to update the DOM without replacing the actual elements. Many of the "hidden properties" (selection, focus, scrolling) et. al. are destroyed when the DOM is recreated, and so it is crucial that a large portion of the DOM is preserved.