knockoutjs: With-binding to a template with a specific Observable Array object in index number

Question

I am trying to pass a specific object in a ObservableArray defined in my view model to a template with the index number.

In my view, it looks like this:

<!-- ko template: { name: "fooTemplate", with: FooCycles()[0] } --><!-- /ko -->

<script id="fooTemplate" type="text/html">
  //some HTML for a individual FooCycle here
</script>

I got the Uncaught ReferenceError: Unable to process binding "template: function (){return { name:"fooTemplate",with:FooCycles()[0]} }" error. Under the with binding, it still focus the parent VM that it belongs to in my JS debugger(Chrome).

I can get access to a specific array object in my model definition that is used for several ko.computed properties:

var fstsum = parseFloat(self.FooCycles()[0].sum());
var sndsum = parseFloat(self.FooCycles()[1].sum());

I can use FooCycles in foreach with no problem:

<!-- ko foreach: FooCycles -->
  <div class="item">
    <!-- ko template: { name: "fooTemplate", with: $data } --><!-- /ko -->
  </div>
<!-- /ko -->

FooCycles()[0] works in javascript, but not working in Knockout.js. Is there a way to get an array object with index in Knockout?

Answer 1

Template binding does not have with listed under the supported "additional" parameters provided in the documentation.

The reason it works with your foreach is due to:

data — an object to supply as the data for the template to render. If you omit this parameter, KO will look for a foreach parameter, or will fall back on using your current model object.

Change the with to data and in the case of the foreach you can just omit it.