Unexpected token with Knockout 3 and jQuery Templates

Question

My application has one binding that uses jQuery Templates plugin to bind Knockout templates. Since upgrading to Knockout 3.x I started seeing an error:

Uncaught SyntaxError: Unable to process binding "template: function (){return { name:'tmpl',foreach:$data.children} }"
Message: Unexpected token )

The above error doesn't allow my binding to work after upgrading to Knockout ver. 3.x (e.g. 3.4.0). With older versions (e.g. 2.1.0) it works normally.

The error may be caused by some conflict with jQuery Templates plugin. Unfortunately, I have to use it in my application.

What could be the cause and the solution?

var viewModel = function() {
  var self = this;
  self.children = ko.observableArray(
    [{}]
  );
};
ko.applyBindings(new viewModel());

<script src="https://code.jquery.com/jquery-1.11.3.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-debug.js"></script>

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

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

Is there a special reason for using jQuery templates instead of the built-in template engine? — Tomalak, Jan 25 '16 at 09:59
Yes I think there is, the code is part of an application that uses jQuery templates to bind data to view. Without it it won't run: http://jsfiddle.net/piglin/UAcC7/1837/ — Peter G., Jan 25 '16 at 10:05
Well, jQuery templates look and work completely different from knockout templates. You are trying to use a knockout template with the jQuery template engine. Compare [the documentation](http://knockoutjs.com/documentation/template-binding.html#note-6-using-jquerytmpl-an-external-string-based-template-engine). I still don't think you need the jQuery template engine at all. ("Without it it won't run" is not a very convincing reason.) — Tomalak, Jan 25 '16 at 10:46
It was used by one of the creators of Knockout in this JSFiddle (http://jsfiddle.net/rniemeyer/qwgrf/) and I haven't found a solution yet that would allow me to do the same without the dependency — Peter G., Jan 25 '16 at 10:52

score 0 · Answer 1 · answered Jan 22 '16 at 20:29

Get rid of the empty object inside your empty array. Doesn't make sense to have it there anyways.

var viewModel = function() {
  var self = this;
  self.children = ko.observableArray([]);
};
ko.applyBindings(new viewModel());

<script src="https://code.jquery.com/jquery-1.11.3.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-debug.js"></script>

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

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

The array is normally full of non-empty elements and the error is same. For the sake of simplicity I added the empty object. The question is what is causing the problem regardless of what's in the array. — Peter G., Jan 22 '16 at 21:12

Unexpected token with Knockout 3 and jQuery Templates

1 Answers1