JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.mikewills.me/edited_c.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<table class="table">
<thead>
<tr>
<th>Hours</th>
<th>Request Type</th>
<th>Use Hours Type</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody data-bind="foreach: days">
<tr class="row1">
<td>
<select name="HoursRequested[]" class="input-small" data-bind="options: $root.hours, value: HoursRequested"></select>
</td>
<td>
<select name="RequestType[]" data-bind="leaveTypeDropDown: RequestType"></select>
</td>
<td data-bind="text: RequestType"></td>
</tr>
</tbody>
</table>
<button data-bind="click: addLeaveDay" class="btn btn-primary"><i class="icon-plus icon-white"></i>Add day</button>
JavaScript
$(document).ready(function () {
ko.applyBindings(new DayViewModel());
// The model for a leave date
function LeaveDay(dateOfLeave, timeOfLeave, hoursRequested, requestType, relationship, natureOfIllness, timesheetCode, isAllDay) {
var self = this;
self.DateOfLeave = dateOfLeave;
self.TimeOfLeave = timeOfLeave;
self.HoursRequested = ko.observable(hoursRequested);
self.RequestType = ko.observable(requestType);
self.HasRelationship = ko.observable(false);
self.Relationship = relationship;
self.HasNatureOfIllness = ko.observable(false);
self.NatureOfIllness = natureOfIllness;
self.TimesheetCode = ko.observable(timesheetCode);
self.IsAllDay = isAllDay;
self.Message = "";
self.RequestType.subscribe(function (newValue) {
alert("test");
});
}
// Knockout View Model
function DayViewModel() {
var self = this;
//self.jsonRequestType = "";
self.hours = FillHours();
self.days = ko.observableArray([
new LeaveDay(new Date().toString("MM/dd/yyyy"), "8:00 am", 8, 0, "", "", 0, "", true)]);
// This is buggy yet.
self.addLeaveDay = function () {
var array = self.days();
var previousDay = array[array.length - 1];
var nextDate = Date.parse(previousDay.DateOfLeave).addDays(1);
var newDay = new LeaveDay(nextDate.toString("MM/dd/yyyy"), previousDay.TimeOfLeave, ko.utils.unwrapObservable(previousDay.HoursRequested()),
ko.utils.unwrapObservable(previousDay.RequestType()), previousDay.Relationship, previousDay.NatureOfIllness,
...