Getting “$item is not defined” on applyBindings

问题:

I'm trying to use knockout to do a pretty basic binding but am having trouble accessing the $item variable from jquery.tmpl. I keep getting "$item is not defined" when I apply the bindings.

I've done this before so I know it can be done but I can't figure out why it is not working in this case. What's interesting is if I remove templateOptions:{parentItem: $item}, then everything works as expected.

I've included the following files

<script type="text/javascript" src="Extension/resources/jquery.1.6.1.js"></script>
<script type="text/javascript" src="Extension/resources/jquery.tmpl.js"></script>
<script type="text/javascript" src="Extension/resources/knockout-1.2.1.js"></script>

My template and bindings look like this

<script type="text/html" id="itemTemplate">
    <span data-bind="text:title"></span>
</script>

<div class="filterResults">
        <span  data-bind="text:message"></span>
        # of items: <span data-bind="text:contentItems().length"></span>
        <table cellspacing="0">
            <tr data-bind="template: { name: 'itemTemplate', foreach: contentItems, 
            templateOptions:{parentItem: $item} 
            }"> </tr>
        </table>            
</div>

And I do the binding using:

//viewModel contains a contentItems observableArray
ko.applyBindings(viewModel, $('.filterResults')[0]);

回答1:

Ok, looks like I can answer this one myself. The problem seems to be that the part where I did the data-bind and was trying to access the jquery.tmpl variable $item is not actually using jquery.tmpl

<tr data-bind="template: { name: 'itemTemplate', foreach: contentItems, 
        templateOptions:{parentItem: $item} 
        }"> </tr>

That is not inside a template so there is no $item variable to access. $item is associated with jquery.tmpl, not knockoutjs. The way I got around the issue was to just put my view model in there instead.

<tr data-bind="template: { name: 'itemTemplate', foreach: contentItems, 
        templateOptions:{parentItem: viewModel} 
        }"> </tr>

And in the actual templates, (itemTemplate in this example), I can access the $item variable.