$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>

try to do inside the tmpl and at the sortableItem binding, parentList: $parent.children instead of parentList: $item.parentList — Bogdan Goie, Jan 25 '16 at 14:03
Within a template foreach binding, you can access the parent viewmodel using `$parent`. So you could just use `$parent.children` instead of `$item...`. — Michael Best, Jan 27 '16 at 22:31

score 2 · Answer 1 · answered Jan 25 '16 at 10:58

2

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

answered Jan 25 '16 at 10:58

shu

1,938
10
19

score 0 · Answer 2 · answered Jan 26 '16 at 09:09

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.

$item is not defined

2 Answers2