Sasi Dhivya Sasi Dhivya - 3 months ago 14
Javascript Question

How to bind the JSON object data to knockout binding with template option?

I am working with knockout js. Now i am using template option and local json data as datasource.In this i am unable to bind the data to node within template.

Please get my html code below:

<div data-bind="template:{name:'treeTemplate',data:{da:Data}}"></div>
<script id="treeTemplate" type="text/html">
<b data-bind="text:$data.text"></b>


Please get my script section below

var treeData = [
{ id: 1, text: "UK"},
{ id: 2, text: "Steven John" },
{ id: 3, text: "USA" },
{ id: 5, text: "Andrew" },
{ id: 4, text: "Angelica" }
];


window.viewModel = {
value: ko.observable(new Date(2015, 06, 15)),
Data: ko.observableArray(treeData)
};
$(function () {
// declaration
ko.applyBindings(viewModel);
});


I have updated the sample in jsfiddle also. Please get the below link:

https://jsfiddle.net/38vnznht/

Can you please anyone suggest on this.Thanks for any help.

Answer

your first problem is the use of data in the template object.

data:{da:Data}

for iterating through a array you need to use foreach

foreach:data

so because of this you need to update your bindings

// from this
<b data-bind="text:$data.text"></b>

// to this
<b data-bind="text: text"></b>

here is a working example : https://jsfiddle.net/wqe3s1vs/3/

Also, documentation on using "foreach" with a named template : http://knockoutjs.com/documentation/template-binding.html#note-2-using-the-foreach-option-with-a-named-template

Comments