Knockout.js use looped variable in foreach binding

Question

I'm new to Knockout.js and I think it is only matter of finding the right syntax.

I want to use the looped variable of a foreach binding to create a component. Something like this:

<ul data-bind="foreach: packages">
    <li>

      <my-widget params='package'></my-widget>

      <!-- I have tried but dont' work:
      <my-widget params='this'></my-widget>
      <my-widget params='$parent'></my-widget>
      <my-widget params='$parenteContext'></my-widget>
      -->

    </li>
</ul>

Is there an easy way? Can with binding can be useful?

EDIT:

Here is a simple jsfiddle to demonstrate it: http://jsfiddle.net/n194o9dp/3/

I'm expecting to see a ul list with a repetition:

a a
b b
c c

Sorry I started from an existing jsfiddle probably something weird happens.. — nkint
– nkint, Commented Sep 8, 2015 at 8:44
Please check the right jsfiddle and tells me if it is the right one. No "nombre", no <table> — nkint
– nkint, Commented Sep 8, 2015 at 8:45

Jamiec · Accepted Answer · 2015-09-08 08:56:46Z

1

I think you're looking for $data which contains the current data item being iterated over.

More info can be founnd in the docs for bindingContext properties

Edit: So you're getting your params all mixed up. Just like binding, you need to pass it property:value - so if you want to pass it the entire outer object you could do:

<my-widget params='data:$data'></my-widget>

That does not need to be called data it could be

<my-widget params='foo:$data'></my-widget>

The only difference would be how you access it within the widget. Also, $data represents a binding context, to access the actual data you need to use the property data, which gets confusing very quickly. All in all, it will work if you do it like this:

<my-widget params='data:$data'></my-widget>

And then inside the widget:

 ....
 viewModel: function(params) {
    this.name = params.data.name
 },
 ....

http://jsfiddle.net/n194o9dp/5/

A better option, in my opinion is to pass what you actually need to your widget:

<my-widget params='name:name'></my-widget>

and access it directly:

 ....
 viewModel: function(params) {
    this.name = params.name
 },
 ....

edited Sep 8, 2015 at 8:56

answered Sep 8, 2015 at 8:11

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nkint Over a year ago

ok thanks, cool I didn't know but.. <my-widget params='$data'></my-widget> prints undefined if I console.log it in the component constructor

Jamiec Over a year ago

Can you include some markup/code/viewmodel in your question, it will help answer the question. A minimal jsfiddle/stacksnippet example would be best.

Dandy · Accepted Answer · 2015-09-08 08:28:17Z

0

You can use component binding

<ul data-bind="foreach: {data: packages, as:package}">
    <li>

    <div data-bind='component: {
        name: "my-widget",
        params: { package: package }
    }'></div>

    </li>
</ul>

More info about component binding is here.

answered Sep 8, 2015 at 8:28

Dandy

2,20716 silver badges16 bronze badges

Collectives™ on Stack Overflow

Knockout.js use looped variable in foreach binding

EDIT:

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related