Non-repeated element inside KnockoutJS foreach loop
I am trying to create a knockout.js component (with CSS3 grids) that displays a bunch of sub-components, which I know can be done via something like:
<div class="items grid" data-bind="foreach: { data: items, as: 'item' }">
<item-component params="data: item" class="grid-item"></item-component>
</div>
The problem is that I cannot figure out how to put a non-repeated item into this list. Ultimately, I want to generate something along these lines:
<div class="items grid">
<div class="something-else grid-item"></div>
<item-component class="grid-item"></item-component>
<item-component class="grid-item"></item-component>
<item-component class="grid-item"></item-component>
</div>
The reason I can't just put the something-else outside of the foreach-bound element is that it's also a grid item, so it has to be a direct child of the grid. It crossed my mind to manually append it via jquery's append, but with MVVM, that's a terrible idea (it doesn't work anyway).
Does anyone know a way to do this with knockout.js?
If I have understood your requirement correctly, it looks you need containerless control flow. It has been talked about in the 2nd point of this answer.
It allows you to do things like this:
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
<li class="tail">Tail item</li>
</ul>
Output:
<ul>
<li class="header">Header item</li>
<li>Item <span>Spoon</span></li>
<li>Item <span>Fork</span></li>
<li class="tail">Tail item</li>
</ul>
-
05:00
-
04:50
-
04:40
Inject JavaScript files inside Templates or HTML with webpack
-
04:30
How do I override a JQuery (Datatable RowGroup) library function?
-
04:00
-
03:40
-
03:30
-
03:20
-
03:10
How to completely stop/reset/reinitialize Matter.js canvas/world/engine/instance
- search for elements in a list 94272 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 92432 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 89976 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 87388 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 84252 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 50701 visits
- Adding methods to es6 child class 19671 visits
