This is a migrated thread and some comments may be shown as answers.

problem with templating and MVVM

3 Answers 176 Views

Templates

This is a migrated thread and some comments may be shown as answers.

daljit asked on 09 Aug 2012, 09:17 PM

Hi,

Urgent Please,
I am evaluating Kendo UI for my company, so please answer it, very urgent please thanks.
Following is the simple example of my problem. I get json data using REST services.
Following is the summary for the problem -
After i ran sample, program display three text boxes, without any value and on editing value, I get the following error in the browser console window -
Uncaught TypeError: Cannot set property 'Name' of undefined

Following is sample code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type = "text/javascript">
        // this is the structure of the data comes from server
        function Employee(Name, Age)
        {
            this.Name = Name;
            this.Age = Age;
        }
        $(document).ready(function ()
        {
            var em1 = new Employee("Daljit", 23);
            var em2 = new Employee("Manjit", 20);
            var em3 = new Employee("Joga", 25);
            var Department =
            {
                Name: "Question Name",
                Employees: new Array(em1, em2, em3)
            };
            var departmentVM = kendo.observable
					(
	                	Department
	                );
            var templateContent = $("#myTemplate").html();
            var template = kendo.template(templateContent);
            $("#daljitControls").append(template(departmentVM.Employees));
            kendo.bind($("#daljitControls"), departmentVM);
        });        
    </script>
    </head>
<body>
    <div id = "daljitControls"> 
            <input type="text" data-bind="value:Name" class="k-textbox" name="Name" /> 
    </div>
    <script type="text/x-kendo-template" id="myTemplate">
           # for (var i = 0; i < data.length; i++) { #
                # var employee = data[i]; #
                 <input data-bind="value: employee.Name" class="k-textbox"/> 
           # } # 
           </script>
</body>
</html>

Thanks,

problem with templating and MVVM

3 Answers, 1 is accepted