var jboy = {}; // my namespace
jboy.data = {
Students: [{
"id": 1,
"firstName": "Jboy",
"lastName": "Flaga",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 2,
"firstName": "Maliit",
"lastName": "Liit",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 3,
"firstName": "Malaki",
"lastName": "Laki",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 4,
"firstName": "Mataba",
"lastName": "Taba",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 5,
"firstName": "Mapayat",
"lastName": "Payat",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 6,
"firstName": "Maputi",
"lastName": "Puti",
"gender": "Male",
"email": "[email protected]"
}, {
"id": 7,
"firstName": "Maitim",
"lastName": "Itim",
"gender": "Male",
"email": "[email protected]"
}, ]
};
//Student constructor
function Student(id, fname, lname, gender, email) {
var self = this;
self.id = ko.observable(id);
self.firstName = ko.observable(fname);
self.lastName = ko.observable(lname);
self.gender = ko.observable(gender);
self.email = ko.observable(email);
self.fullName = ko.computed(function () {
return this.firstName() + ' ' + this.lastName();
}, self);
}
jboy.studentViewModel = (function () {
var students = ko.observableArray(),
selectedStudent = ko.observable(),
studentToAdd = ko.observable(),
loadStudents = (function () {
students([]); //reset
$.each(jboy.data.Students, function (i, stud) {
students.push(new Student(stud.id, stud.firstName, stud.lastName, stud.gender, stud.email));
});
}),
addNewStudent = function () {
var newStudent = new Student();
var nextStudId = students().length + 1;
newStudent.id(nextStudId);
newStudent.firstName("New");
newStudent.lastName("Student " + (nextStudId));
students.push(newStudent);
studentToAdd(newStudent);
},
removeSelectedStudent = function () {
if (selectedStudent) {
students.remove(selectedStudent());
}
};
//load student list on page load
loadStudents();
return {
students: students,
selectedStudent: selectedStudent,
loadStudents: loadStudents,
addNewStudent: addNewStudent,
removeSelectedStudent: removeSelectedStudent
};
})();
ko.applyBindings(jboy.studentViewModel);
<div id="students-list">
<h1>Students List</h1>
<button data-bind="click: loadStudents">Load Students</button>Length: <span data-bind="text: students().length"></span>
<br
/>
<select data-bind="options: students, value: selectedStudent,
optionsText: function(stud) { return stud.id() + '. ' + stud.firstName() + ' ' + stud.lastName(); }"
size="10"></select>
<br />
<button data-bind="click: addNewStudent">Add New Student</button>
<div data-bind="if: selectedStudent">
<button data-bind="click: removeSelectedStudent">Remove Selected Student</button>
</div>
<br />
<br />
<div data-bind="if: selectedStudent"> <span style="font-size: 20px; text-decoration: underline;">Selected Student</span>
<br
/> <strong>Fullname: <span data-bind="text: selectedStudent().fullName"></span></strong>
<br
/>Email: <span data-bind="text: selectedStudent().email"></span>
<br />Gender: <span data-bind="text: selectedStudent().gender"></span>
<br />
</div>
<br />
</div>
<div id="students-table">
<h1>Students Table</h1>
<table>
<thead>
<tr>
<th>id</th>
<th>first name</th>
<th>last name</th>
</tr>
</thead>
<tbody data-bind="foreach: students">
<tr>
<td>
<input size="2" data-bind="value: id, style: {color: 'red'}" />
</td>
<td>
<input size="10" data-bind="value: firstName" />
</td>
<td>
<input size="10" data-bind="value: lastName" />
</td>
<td>
<input data-bind="value: email" />
</td>
<td>
<select data-bind=" value: gender ">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</body>
#students-table {
float: right;
}
#students-list {
float: left;
}
External resources loaded into this fiddle: