How do I...Clone nodes, update data, rename Id's, write to DOM

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

How do I...Clone nodes, update data, rename Id's, write to DOM

zcurtis
// How do I do the following using Dojo 1.10?
// Clone all DOM nodes contained in div (template)
// Using cloned object, find span tags with id's and update data based on id
// Rename the span tag id's to be unique
// Insert new DOM structure
function format(/*object*/ data) {
        var template = query('*', dom.byId('myId'));
        var newNodes = lang.clone(template);
        // what now???
        array.forEach(
                        newNodes,
                        function(item, idx, arr) {
                                // not sure what is 'item' data type
                        }
        );
        domConstruct.place(newNodes, 'myId');
}

Thanks!



----------------------------------------- The information contained in this communication (including any attachments hereto) is confidential and is intended solely for the personal and confidential use of the individual or entity to whom it is addressed. The information may also constitute a legally privileged confidential communication. If the reader of this message is not the intended recipient or an agent responsible for delivering it to the intended recipient, you are hereby notified that you have received this communication in error and that any review, dissemination, copying, or unauthorized use of this information, or the taking of any action in reliance on the contents of this information is strictly prohibited. If you have received this communication in error, please notify us immediately by e-mail, and delete the original message. Thank you


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

Karl Tiedt

-Karl Tiedt

On Mon, Jul 27, 2015 at 2:25 PM, <[hidden email]> wrote:
// How do I do the following using Dojo 1.10?
// Clone all DOM nodes contained in div (template)
// Using cloned object, find span tags with id's and update data based on id
// Rename the span tag id's to be unique
// Insert new DOM structure
function format(/*object*/ data) {
        var template = query('*', dom.byId('myId'));
        var newNodes = lang.clone(template);
        // what now???
        array.forEach(
                        newNodes,
                        function(item, idx, arr) {
                                // not sure what is 'item' data type
                        }
        );
        domConstruct.place(newNodes, 'myId');
}

Thanks!



----------------------------------------- The information contained in this communication (including any attachments hereto) is confidential and is intended solely for the personal and confidential use of the individual or entity to whom it is addressed. The information may also constitute a legally privileged confidential communication. If the reader of this message is not the intended recipient or an agent responsible for delivering it to the intended recipient, you are hereby notified that you have received this communication in error and that any review, dissemination, copying, or unauthorized use of this information, or the taking of any action in reliance on the contents of this information is strictly prohibited. If you have received this communication in error, please notify us immediately by e-mail, and delete the original message. Thank you


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest



--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

zcurtis
That's a thought, but I thought widgets are more for creating UI components. What I am really doing is trying to populate data in a section of the DOM and return that data to a framework that will handle the UI. I think I am just struggling with using the API. I can query the DOM structure I am after, I can then clone it, however using the cloned DOM nodes and finding the span tags with specific ID's that I am after and then updating those ID's to be unique is where I having a problem. Thoughts?

EDIT for last line of my code:
domConstruct.place(newNodes, 'myId');
should instead be more like...
return newNodes;
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

Karl Tiedt
Using hard coded ID's in a template is generally not the best way to do things since templates get reused (yes I know you intend to modify them but that isnt always kosher either)... I would recommend using class-names to provide quick access to the nodes you need inside the template, or basic node traversal node.childNodes[0...X] if its a repeated element etc. (Just be sure to not create errant textNodes)

What you describe sounds exactly like a templatedWidget solution, but if you say its not a widget then the above is most likely the solution you would be looking for.

-Karl Tiedt

On Wed, Jul 29, 2015 at 12:01 PM, zcurtis <[hidden email]> wrote:
That's a thought, but I thought widgets are more for creating UI components.
What I am really doing is trying to populate data in a section of the DOM
and return that data to a framework that will handle the UI. I think I am
just struggling with using the API. I can query the DOM structure I am
after, I can then clone it, however using the cloned DOM nodes and finding
the span tags with specific ID's that I am after and then updating those
ID's to be unique is where I having a problem. Thoughts?

EDIT for last line of my code:
domConstruct.place(newNodes, 'myId');
should instead be more like...
return newNodes;




--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/How-do-I-Clone-nodes-update-data-rename-Id-s-write-to-DOM-tp4006289p4006300.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

Kitson Kelly
In reply to this post by zcurtis

What type of data... Usually the DOM isn't the best way to communicate
data to something else.  Also the DOM is hard to do this sort of
copy/paste thing that I think you are trying to do (in part because of
what Karl mentions about the ID thing).  This is why the Shadow DOM and
<template> were introduced as part of Web Components, though only Chrome
supports the Shadown DOM and IE/Edge doesn't support the <template> element.

On 29/07/2015 20:01, zcurtis wrote:

> That's a thought, but I thought widgets are more for creating UI components.
> What I am really doing is trying to populate data in a section of the DOM
> and return that data to a framework that will handle the UI. I think I am
> just struggling with using the API. I can query the DOM structure I am
> after, I can then clone it, however using the cloned DOM nodes and finding
> the span tags with specific ID's that I am after and then updating those
> ID's to be unique is where I having a problem. Thoughts?
>
> EDIT for last line of my code:
> domConstruct.place(newNodes, 'myId');
> should instead be more like...
> return newNodes;
>
>
>
>
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/How-do-I-Clone-nodes-update-data-rename-Id-s-write-to-DOM-tp4006289p4006300.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

signature.asc (859 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

zcurtis
This post was updated on .
The data is in an object such that data.fieldA will retrieve an individual field (approx 20 fields). A framework is handing us this Data object which we can use to insert it's values into our desired markup (template). We then hand the markup containing the field values back to the framework (which will display data in a table).

Markup (clone the Template...a row of data) example:
<someHtml><spanTag id="fieldA"></spanTag></someHtml>
<someHtml><spanTag id="fieldB"></spanTag></someHtml>
...

Desired output (note values populated and id's unique):
<someHtml><spanTag id="fieldA101">value 1</spanTag></someHtml>
<someHtml><spanTag id="fieldB101">value 2</spanTag></someHtml>
...
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

dylanks
When you have repetitive data like this, a better approach is to often
use a model or data object, and then a widget to synchronize the view.
For example,
https://www.sitepen.com/blog/2015/07/28/simple-model-view-synchronization-with-dstore-and-dijit/

If you really just want to clone some nodes, you can of course do that,
it's just less efficient from a performance, maintenance and
architecture perspective. That said, it's pretty simple to do:

// Clone all DOM nodes contained in div (template)

Include the dojo/_base/lang module via AMD, then do
var x = lang.clone(parentNode)

// Using cloned object, find span tags with id's and update data based on id
// Rename the span tag id's to be unique

Include the dojo/query module via AMD then do
query('span', x).forEach(function (node) {
        node.innerHTML = ...
        node.id = ...
});

// Insert new DOM structure

Include the dojo/dom-construct module via AMD, then do
domConstruct.place(x, refNode, position)

More info can be found at
https://dojotoolkit.org/documentation/tutorials/1.10/dom_functions/index.html
and
https://dojotoolkit.org/documentation/tutorials/1.10/using_query/index.html

If you're using purely modern browsers, you could also use native APIs
if preferred.

Regards,
-Dylan

on 8/6/15, 12:22 (GMT-07:00) zcurtis said the following:

> The data is in an object such that data.fieldA will retrieve an individual
> field (approx 20 fields). A framework is handing us this Data object which
> we can use to insert it's values into our desired markup (template). We then
> hand the markup containing the field values back to the framework (which
> will display data in a table).
>
> Markup (clone the Template...a row of data) example:
> <someHtml></someHtml>
> <someHtml></someHtml>
> ...
>
> Desired output (note values populated and id's unique):
> <someHtml>value 1</someHtml>
> <someHtml>value 2</someHtml>
> ...
>
>
>
>
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/How-do-I-Clone-nodes-update-data-rename-Id-s-write-to-DOM-tp4006289p4006321.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.

--
Dylan Schiemann
SitePen, Inc.
Dojo workshops in the US, Canada, and Europe:
http://www.sitepen.com/workshops/
http://www.sitepen.com/

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Co-Founder, Dojo Toolkit
CEO, SitePen, Inc.  http://www.sitepen.com/
Reply | Threaded
Open this post in threaded view
|

Re: How do I...Clone nodes, update data, rename Id's, write to DOM

zcurtis
This post was updated on .
Thanks for all the suggestions...I almost have this working after more time into this than I would like to admit to. Again, a framework is handing me a data object ('d') and I need to return to the framework a String of a html fragment (essentially the details about a row of data).

#1- I would prefer to NOT incur the penalty of writing to the dom and then grab the innerHTML to return the html fragment. However, I did not see a way in the API when working with the cloned object (NodeList) to just get a String representation of its content.
#2- If I can't do #1, I am getting a duplicate id='issues-detailTemplateWrapper' in the dom. It seems I can't do anything with the root node of the cloned object, like naming the id or not outputting the element.

<div id="issues-detailTemplateWrapper" class="hide">
 <div id="issues-detailTemplate">
  // a bunch of template html
 </div>
</div>

function buildDetailRow(d) {
	var ticketID = d.ticketID;
	var f = {
		'issues-businessService':d.businessService,
		'issues-description':d.description,
		'issues-history':d.history //TODO: 20 more fields
	};
	var newNodes = lang.clone(dom.byId('issues-detailTemplateWrapper'));
	query('div[id="issues-detailTemplate"]', newNodes).forEach(function(node) {
		domAttr.set(node, 'id', node.id + ticketID);
	});
	query('span[id]', newNodes).forEach(function(node) {
		node.innerHTML = f[node.id];
		domAttr.set(node, 'id', node.id + ticketID);
	});
	domCon.place(newNodes, 'issues-detailTemplateWrapper', 'last');
	return dom.byId('issues-detailTemplate' + ticketID).innerHTML;
};