Question

I’m using a named template and binding a list of data to that. The binding works great, but I get the error on $parent.inState() call. Looking at the sample below:

<div data-bind="template: { name: 'peopleScript', data: people }"> </div>

<script id="peopleScript" type="text/html">
    <ul data-bind="foreach: people">
        <li>
            Name: <span data-bind="text: name"> </span>
            State: <span data-bind="{ text: state, css: { outOfState: !$parent.inState($data) } }"> </span>

            <span data-bind="visible: ($parent.inState($data))">
                In State
            <span>

            <a href="#" data-bind="click: $parent.removePerson">Remove</a>
        </li>
    </ul>
    <button data-bind="click: addPerson">Add</button>
</script>

it says $parent.inState is not a function. I already tried $parents too, but to no avail. I know the code to apply the bindings works; if I just have the template inline, it works great. I also know everything else is setup OK and that it can access the method just fine. So it’s simply it can’t find inState for some reason.

Any ideas why?

Thanks.

Answer 1

When you are passing data as people, then you would want to foreach on $data (unless your structure is really people.people.

You could do:

<div>
  <ul data-bind="template: { name: 'peopleScript', foreach: people }"></ul>
</div>

and just have the li in the template or with your current structure, do your foreach on $data.

The issue with inState is that the template creates one scope, then the foreach binding creates another. So, when you are inside, you would have to go up two scopes. You could do this by using $parents[1] like: http://jsfiddle.net/rniemeyer/RNWML/ or if it really is at the top level, then using $root is the easiest choice like: http://jsfiddle.net/rniemeyer/RNWML/2/