$item is not defined

Question

My application uses it and has a problem with the $item field under Knockout 3.4.0. I need to access parentList, which stores the original parent element of an item that was dragged to another list.

The code below will not run with the latest version of Knockout and jQuery templates is one of its dependencies. I'm looking for the cause, solution, or a workaround.

JSFiddle with detailed example: http://jsfiddle.net/piglin/UAcC7/1837/

Uncaught ReferenceError: Unable to process binding "template: function (){return { name:'rowTmpl',foreach:$data.children,templateOptions:{ parentList:$data.children}} }"
Message: Unable to process binding "template: function (){return { name:'cellTmpl',foreach:$data.children,templateOptions:{ parentList:$data.children}} }"
Message: Unable to process binding "sortableItem: function (){return { item:$data,parentList:$item.parentList} }"
Message: $item is not defined

ko.bindingHandlers.sortableList = {};
ko.bindingHandlers.sortableItem = {
  init: function(element, valueAccessor) {
    var options = valueAccessor();
  }
};
var viewModel = function() {
  var self = this;
  self.children = ko.observableArray(
    [{}]
  );
};
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div data-bind="template: { name: 'tmpl', foreach: $data.children, templateOptions: { parentList: $data.children } }">
</div>

<script id="tmpl" type="text/html">
  <div data-bind="sortableItem: { item: $data, parentList: $item.parentList }">
  </div>
</script>

Answer 1

Seems to your Template name is "cellTmpl" but in binding you refered as name: 'tmpl'

Answer 2

The real problem is that jQuery templates plugin is not loaded at the time the HTML document is being attached to my Knockout JS page.

I have RequireJS configured properly and it seems to be problem with the Knockout lifecycle, I need the jQuery templates dependency to be loaded in activate stage and I am working on a code example to achieve this.