Here is my code:
employeedata.ts
module EmployeeModule {
export class employeedata {
public Emp_Id: KnockoutObservable<string> = ko.observable<string>();
public Emp_Name: KnockoutObservable<string> = ko.observable<string>();
public Phone: KnockoutObservable<string> = ko.observable<string>();
public Address: KnockoutObservable<string> = ko.observable<string>();
public constructor(Emp_Id: string, Emp_Name: string, phone: string, address: string) {
this.Emp_Id(Emp_Id);
this.Emp_Name(Emp_Name);
this.Phone(phone);
this.Address(address);
}
}
}
export = EmployeeModule;
employee.ts
import employee = require("modules/employeedata")
class employees {
public Emp_Id: KnockoutObservable<string> = ko.observable<string>();
public Emp_Name: KnockoutObservable<string> = ko.observable<string>();
public Phone: KnockoutObservable<string> = ko.observable<string>();
public Address: KnockoutObservable<string> = ko.observable<string>();
public userArray: KnockoutObservableArray<employee.employeedata> = ko.observableArray<employee.employeedata>([
new employee.employeedata("1", "Peter", "9090504010", "BANGALORE"),
new employee.employeedata("2", "John", "9090504010", "BANGALORE")
]);
public EmpList = () => {
$.ajax({
type: 'GET',
url: 'http://localhost:81/Service1.svc/Employee',
contentType: "application/javascript",
dataType: "json",
success: function (response) {
var data = response.GetEmployeeDetailsResult;
if (data.length > 0) {
debugger;
var emp = new employees();
for (var i = 0; i < data.length; i++) {
emp.userArray.push(new employee.employeedata(data[i].Emp_Id, data[i].Emp_Name, data[i].Phone, data[i].Address));
}
emp.userArray.valueHasMutated();
debugger;
}
},
error: function (data) {
alert(data);
}
});
}
}
export =employees;
In debug mode i can see all the data are available in userArray, But its not updating in the UI.
Employee.html
<table>
<thead>
<th>
<table><tbody><tr><td>Employee Id</td></tr></tbody></table>
<table><tbody><tr><td>Employee Name</td></tr></tbody></table>
<table><tbody><tr><td>Phone</td></tr></tbody></table>
<table><tbody><tr><td>Address</td></tr></tbody></table>
</th>
</thead>
<tbody data-bind="foreach : userArray">
<tr>
<td data-bind="text : Emp_Id"></td>
<td data-bind="text : Emp_Name"></td>
<td data-bind="text : Phone"></td>
<td data-bind="text : Address"></td>
</tr>
</tbody>
</table>
<b>New Record</b>
<br />
Name: <input type="text" data-bind="value: Emp_Id"/>
Surname: <input type="text" data-bind="value: Emp_Name" />
Phone: <input type="text" data-bind="value: Phone" />
Address: <input type="text" data-bind="value: Address" />
<input type="button" value="Save" data-bind="click: EmpList" />