Example for foreach with multiple values push / unshift

Question

Example for foreach with multiple values push / unshift

pwFoo opened this issue 5 years ago · 2 comments

Similar to #9 I tried to add multiple values to an t-foreach.
I don't know if there is an easier way, but that worked for me. You could improve and extend examples with it?

And you should name the examples like directive used instead of issue number?

<!DOCTYPE html>
<html lang="en">
<head>
<!--<script src="https://unpkg.com/tlx/browser/tlx.min.js"></script>-->
<script src="https://unpkg.com/tlx@1.0.39/browser/tlx.min.js"></script>
</head>
<body>
<div>
In the debugger console type "items[0]=3" and the content should update.</div>
<table id="foreach" t-foreach="${items}">
<tr>
<td>${index}</td><td>${value}</td>
</tr>
</table>
<div>
    <pre>
        var test = ["zero1", "zero2"];              // to add
        Array.prototype.push.apply(items,test)      // append
        Array.prototype.unshift.apply(items,test)   // prepend
    </pre>
</div>
<script>
var items = tlx.reactor(["one", "two", "three"])
tlx.view(document.getElementById("foreach"),{model:items});
</script>
</body>
</html>

If I not use that way and just use items.push or items.unshift all values are added as one (string) instead of multiple values.

Answer 1 · 2019-06-10T23:22:59.000Z

@pwFoo I do not know what you mean by "If I not use that way and just use items.push or items.unshift all values are added as one (string) instead of multiple values."

Answer 2 · 2019-06-11T09:37:57.000Z

Example.

Initial output


0 | one
0 | two
0 | three

console changes

var test = ["zero1", "zero2"]; 
items.push(test); # console return: "4"

Result:

0	one
0	two
0	three
0	zero1,zero2

But I tried to add two new values / rows instead of one. See above.

 var test = ["zero1", "zero2"];             
 Array.prototype.push.apply(items,test)   # console result: "5"

output with two new rows

0 | one
0 | two
0 | three
0 | zero1 # first new row
0 | zero2 # second new row