Question

I’ve been playing around with knockoutjs recently to see if it’s going to be of any help to the things I do. I’m a bit stuck on something though.

Say I have an observableArray and and I want to bind the items using a template but without a container, or render itself. Is it possible?

The sample markup is:

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell" data-bind="foreach: option_types">
        <div class="cell" data-bind="html: Name"></div>
    </div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

However what I would really want is something like this (note no child .cell elements, and “renderSelf” – made up parameter)

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell" data-bind="foreach: option_types, renderSelf: true">
        ${Name}
    </div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

Which would then result in something like

<div class="header row">
    <div class="cell">Product Name</div>
    <div class="cell">Name 1</div>
    <div class="cell">Name 2</div>
    <div class="cell">Name 3</div>
    <div class="cell">Name 4</div>
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

Is that going to be possible? Or am I thinking of it in the wrong way?

Thanks.

Answer 1

Version 1.3 which is “stable beta” allows you to declare what’s called a Containerless Control Flow. This is a fancy way of saying you can declare the foreach within an HMTL comment which will allow you to achieve the desired output. For your example it would look like this:

<div class="header row">
    <div class="cell">Product Name</div>
    <!-- ko foreach: option-types -->
    <div class="cell" data-bind="html: Name"></div>
    <!-- /ko -->
    <div class="cell">Level</div>
    <div class="cell">Infinite</div>
</div>

See this article on Steve Sanderson’s blog for more info.

I’ve been using 1.3.0 on a relatively large application recently and found it to be very stable.

As an aside the ability in 1.3.0 to also access the parent and root viewModel within a foreach template is incredibly useful and helps keep your viewModel design much cleaner.