JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<table><tr>
    <td>Outside foreach control</td>
<!-- ko foreach: {data: parentArray, as: 'item'} -->
    
    <!-- ko if: $root.someLogicalExpression($data) -->
    <td data-bind='foreach: $data'>
        <span data-bind="text: $data"></span>
        <span data-bind="if: item.length-1 != $index()">,</span>
        <br/>
   </td>
    <!-- /ko -->
     <!-- ko ifnot: $root.someLogicalExpression($data) -->
    <td>Alternate: <b> <span data-bind="text: $data"></span> </b></td>
    <!-- /ko -->
<!-- /ko -->
    </tr></table>

CSS

table,th,td {
    border: 1px solid olive
}

JavaScript

var vm = { 
    parentArray : [["bunch of junk text", "with more text", "and a third line"],
                   ["blah blah blah"],
                    ["uno", "dos"],
                   ko.observable("Not an array")]       
     
}

vm.someLogicalExpression = function(v){   
   return Object.prototype.toString.call( v ) === '[object Array]';  
}

ko.applyBindings( vm )