Data binding basics ...

[Paul]

Hi guys,

I'm trying to output a template for a panel bar which I want to bind to a simple "Task" object.
The idea is that I have a kendoPanelbar and a template for adding new campaigns as panels based on a selected task. 
In short, my task object has a "CampaignId" property and as shown I want to output that value when building the template.
For some reason though kendo is giving me an error which suggests that it can't find this property.

Any ideas?


template:

<script id="campaignContextTemplate" type="text/x-kendo-template">
    <li>
        <span>Campaign #: CampaignId #</span>
        <div class="campaignTree"></div>
    </li>
</script>

init code in question:

var task = $(this);
console.log(task);
var panelTemplate = kendo.template($("#campaignContextTemplate").html());
var boundResult = panelTemplate(task);
console.log(boundResult);
$("#context").append(boundResult);

.... (init tree ect omitted for simplicity) ...

Chrome tools output:

[i, jquery: "1.10.2", constructor: function, init: function, selector: "", toArray: function…]
    0: i
       CampaignId: 123
        .... (rest of object output removed) ...

Uncaught ReferenceError: CampaignId is not defined VM23536:3

[Petyo]

Hi Paul,

I am not sure what is the purpose of this line:

var task = $(this);

but most likely wrapping the data object with jQuery is not necessary. Please remove that line and give it a try.

Regards,
Petyo
Telerik