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

problem with templating and MVVM

3 Answers 179 Views
Templates
This is a migrated thread and some comments may be shown as answers.
daljit
Top achievements
Rank 1
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,

3 Answers, 1 is accepted

Sort by
0
daljit
Top achievements
Rank 1
answered on 10 Aug 2012, 11:08 AM
can any one please answer this question or atleast put me in some direction.

Thanks
0
Rich
Top achievements
Rank 1
answered on 27 Aug 2012, 03:59 PM
wouldn't be something like:

<script type="text/x-kendo-template" id="myTemplate">
           # for (var i = 0; i < data.Employees.length; i++) { #
                # var employee = data.Employees[i]; #
                 <input data-bind="value: employee.Name" class="k-textbox"/> 
           # } # 
           </script>
0
Jeremy Wiebe
Top achievements
Rank 1
answered on 19 Sep 2012, 07:38 PM
You are going about this in a much more difficult way than you need to. 

Check out this jsFiddle:  http://jsfiddle.net/jeremy_wiebe/bJPST/ 

Also, check out this documentation page on the 'source' and 'template' bindings: http://demos.kendoui.com/web/mvvm/source.html 
Tags
Templates
Asked by
daljit
Top achievements
Rank 1
Answers by
daljit
Top achievements
Rank 1
Rich
Top achievements
Rank 1
Jeremy Wiebe
Top achievements
Rank 1
Share this question
or