Problem with latest knockout 3.5.1.js
683 views
Skip to first unread message
Pooja Sawant
Feb 16, 2021, 4:01:18 AM2/16/21
to knock...@googlegroups.com
Hi,
I am a dotnet developer and I have a problem in knockoutjs.
I have upgraded knockout and jquery version to 3.5.1 but getting below issue
Uncaught SyntaxError: Unable to process binding "template: function(){return {name:"sectionTemplate",foreach:sections,templateOptions:{ deleteSection:deleteSection,openAddDocumentsDialog:openAddDocumentsDialog}} }" Message: Unexpected token ')'
Is there any issue with the knockout library when we use nested template?
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<title></title>
</head>
<body>
<h2>My Menu</h2>
<hr />
<div data-bind="template: { name: 'items', data: breakfast, templateOptions: { header: 'Breakfast Items', message: 'Wake up to these delicious items!', class: 'breakfast' } }"></div>
<script id="items" type="text/html">
<h3>${$item.header}</h3>
<div class="${$item.class}">
{{each $data}}
<p>
<span class="name">${name}</span>
<span class="price">${price}</span>
</p>
{{/each}}
</div>
<p><em>${$item.message}</em></p>
<hr />
<div data-bind="template: { name: 'items2', data: newItems, templateOptions: { header: 'New Items', message: 'Wake up to these delicious items!', class: 'breakfast'} }"></div>
</script>
<script id="items2" type="text/html">
<h3>${$item.header}</h3>
<div class="${$item.class}">
{{each $data}}
<p>
<span class="name">${name}</span>
<span class="price">${price}</span>
</p>
{{/each}}
</div>
<p><em>${$item.message}</em></p>
<hr />
</script>
<script type="text/javascript">
var viewModel = {
breakfast: [
{ name: "toast", price: 2.50 },
{ name: "pancakes", price: 4.00 },
{ name: "eggs", price: 3.25 }],
newItems: [
{ name: "Oats", price: 2.50 }],
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<title></title>
</head>
<body>
<h2>My Menu</h2>
<hr />
<div data-bind="template: { name: 'items', data: breakfast, templateOptions: { header: 'Breakfast Items', message: 'Wake up to these delicious items!', class: 'breakfast' } }"></div>
<script id="items" type="text/html">
<h3>${$item.header}</h3>
<div class="${$item.class}">
{{each $data}}
<p>
<span class="name">${name}</span>
<span class="price">${price}</span>
</p>
{{/each}}
</div>
<p><em>${$item.message}</em></p>
<hr />
<div data-bind="template: { name: 'items2', data: newItems, templateOptions: { header: 'New Items', message: 'Wake up to these delicious items!', class: 'breakfast'} }"></div>
</script>
<script id="items2" type="text/html">
<h3>${$item.header}</h3>
<div class="${$item.class}">
{{each $data}}
<p>
<span class="name">${name}</span>
<span class="price">${price}</span>
</p>
{{/each}}
</div>
<p><em>${$item.message}</em></p>
<hr />
</script>
<script type="text/javascript">
var viewModel = {
breakfast: [
{ name: "toast", price: 2.50 },
{ name: "pancakes", price: 4.00 },
{ name: "eggs", price: 3.25 }],
newItems: [
{ name: "Oats", price: 2.50 }],
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Specially error is getting when I use nested template item2
Please help me out, Thanks in advance
Sylvain Garden
Mar 1, 2021, 11:21:52 AM3/1/21
to KnockoutJS
According to the doc https://knockoutjs.com/documentation/template-binding.html,
jquery.tmpl is still supported. However the interface changed in 1.3. I think there is no more templateOptions, only data. You have to find another way to mix your viewmodel and the settings of your view.
See https://stackoverflow.com/questions/8068305/passing-options-to-templates-in-knockout-1-3 for more information.
Reply all
Reply to author
Forward
0 new messages