Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
trusktr opened this issue Sep 5, 2012 · 2 comments
Open

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

trusktr opened this issue Sep 5, 2012 · 2 comments
Labels
low-priority

Comments

@trusktr
Copy link

trusktr commented Sep 5, 2012

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
Copy link
Author

trusktr commented Sep 5, 2012

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
low-priority
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fatlotus @trusktr