Source and Template Binding Doesn't Render

[Karl]

I am new to Kendo, so it is most likely an error on my part but I cannot seem to get source and template binding to work.

The following is my view. I have a drop down list which should update a ul of links but even though my binding is working (the select element is just for testing) I cant seem to get the ul to render using the template. I get no errors of any kind it just doesnt render.

<div class="global-nav-header border-bottom">
    <h2 data-bind="text: headerText"></h2>
    <select data-text-field="name" data-value-field="handle" data-bind="source: reportsTypes, value: selectedReportsType"></select>
</div>
<div class="global-nav-body">
    <select data-text-field="name" data-value-field="handle" data-bind="source: reports"></select>
    <ul class="reports-list" data-template="reports-ul-template" data-bind="source: reports">
    </ul>
    <script id="reports-ul-template" type="text/x-kendo-template">
        <li>
            <a href="#" class="instance-link" data-bind="text: name, style: { backgroundImage: icon }, attr: { data-id: id }"></a>
        </li>
    </script>
</div>

The view model is as follows so the selected reports type changs and the calculated field gets called but still no li's are rendered in my ul.

var viewModel = kendo.observable({
    headerText: "Reports",
    reportsTypes: getReportsTypes(),
    selectedReportsType: 0,
    reports: function () {
        var reportsTypeHandle = this.get("selectedReportsType");
        var reports;
        switch (reportsTypeHandle) {
            case 1:
                reports = [
                    new report("Foundations", 1, "~/Content/images/icocyg_reports_small.png"),
                    new report("All", 2, "~/Content/images/icocyg_reports_small.png"),
                    new report("Large Tower", 3, "~/Content/images/icocyg_reports_small.png")];
                    break;
            case 2:
                reports = [
                    new report("Plant Overview", 5, "~/Content/images/icocyg_reports_small.png"),
                    new report("Area 15 Subsystem", 6, "~/Content/images/icocyg_reports_small.png"),
                    new report("Generator Layout", 7, "~/Content/images/icocyg_reports_small.png"),
                    new report("High Power Cables", 8, "~/Content/images/icocyg_reports_small.png")];
                break;
            case 3:
                reports = [
                    new report("Plant Status", 9, "~/Content/images/icocyg_reports_small.png"),
                    new report("Electrical Status", 10, "~/Content/images/icocyg_reports_small.png"),
                    new report("Structural Status", 11, "~/Content/images/icocyg_reports_small.png"),
                    new report("Production Report", 12, "~/Content/images/icocyg_reports_small.png"),
                    new report("Production Report All", 13, "~/Content/images/icocyg_reports_small.png")];
                break;
        }
        return reports;
    }    
});

The result I get is attached.

Thanks in advance.

 

[Alexander Valchev]

Hi Karl,

Since the example is not runnable and I cannot debug I am not sure where exactly the problem comes from. Definitely when the template renders it will throw a JavaScript error because the "#" character is not escaped.

<a href="\#" class="instance-link" data-id="#= id #">#= name #</a>

When the hash sign is not part of the template syntax, the developer must escape it.

Apart from that your code looks OK. I tested it here and got everything to work as expected. Please compare the presented implementation with your current one and let me know if you have any further questions.

Kind regards,
Alexander Valchev
the Telerik team