Handle element collections / nodelist?
pwFoo opened this issue · 8 comments
Instead of execute tlx.view for each element (by id) it would be nice to execute data binding on collections / node lists (for example by class)?
Done with a forEach loop here.
replaced three tlx.view by forEach loop.
//tlx.view(document.getElementById("field1"),{model});
//tlx.view(document.getElementById("field2"),{model});
//tlx.view(document.getElementById("field3"),{model});
[].forEach.call(document.getElementsByClassName("fields"), function(elem) {
tlx.view(elem,{model})
});
Is there a change to get nodelist / collection handling in TLX by detect single element or node list?
Full example
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel der Seite | Name der Website</title>
<script src="https://unpkg.com/tlx/browser/tlx.min.js"></script>
</head>
<body>
<div class="fields" id="field1">Hello ${firstname}</div>
<div class="fields" id="field2">Hello ${firstname}</div>
<div class="fields" id="field3">Hello ${firstname} ${lastname}</div>
<div>First Name: <input id="firstName" name="firstname" value="${firstname}" protect></div>
<script type="text/javascript">
const model = tlx.reactor();
//tlx.view(document.getElementById("field1"),{model});
//tlx.view(document.getElementById("field2"),{model});
//tlx.view(document.getElementById("field3"),{model});
[].forEach.call(document.getElementsByClassName("fields"), function(elem) {
tlx.view(elem,{model})
});
tlx.view(document.getElementById("firstName"),{model,linkModel:true});
</script>
</body>
</html>
Maybe check if first param is a (single) element by type. If not asume it's a list of nodes and use a loop to handle both?
@pwFoo I think this simply works as a side effect of fixes in v1.0.24. Please confirm. Also, thank you so much for your easy to follow example code in all issues you have filed!
With modified code it doesn't work for me?
//tlx.view(document.getElementById("field1"),{model});
//tlx.view(document.getElementById("field2"),{model});
//tlx.view(document.getElementById("field3"),{model});
/*
[].forEach.call(document.getElementsByClassName("fields"), function(elem) {
tlx.view(elem,{model})
});
*/
tlx.view(document.getElementsByClassName("fields"),{model});
Should tlx.view() now handle collections / nodelists or have I adjust something?
Replace forEach with following line
tlx.view(document.getElementsByClassName("fields"),{model});
Console logs me the following error.
tlx.min.js:1 Uncaught TypeError: Cannot convert undefined or null to object
at slice (<anonymous>)
| g | @ | tlx.min.js:1
-- | -- | -- | --
| v | @ | tlx.min.js:1
| E | @ | tlx.min.js:1
| (anonymous) | @ | (index):55
@pwFoo I guess I did not understand your request initially. To be clear, you want to pass in an array of elements to view and have them all bound?
Yes, would be a nice feature, if done with minimal code...
@pwFoo Trivial enhancement. Will push shortly.
Fixed I think! 👍