CODEWITHSUNDEEP
knockout.js
John Petrak
John Petrak

Reputation: 2928

How to bind multiple collections to a single ul using Knockout

I have a view model with two observable arrays:

In the view I want do something like this

<ul>

    <!-- ko foreach: assignedItems -->
    <li>
       <!-- display item-->
    </li>
    <!-- /ko -->

    <!-- ko foreach: requiredDropPoints-->
    <li>
       <!-- display different item-->
    </li>
    <!-- /ko -->

</ul>

I can do ko if: expression after the first foreach and it works fine, but the 2nd foreach won't work. Is there a way to get what I need?

Upvotes: 0

Views: 170

Answers (1)

TSV
TSV

Reputation: 7641

You can wrap your collections with ko.computed and bind list items to resulting computed:

composite = ko.computed(function() {
  var result = [];
  result.push.apply(result, assignedItems());
  result.push.apply(result, requiredDropPoints());
  return result;
});

<ul>
    <!-- ko foreach: composite -->
    <li>
       <!-- display item-->
    </li>
    <!-- /ko -->
</ul>

In this composite you can also filter items, map them or do some additional processing.

Upvotes: 1

Related Questions