計算可觀察基因敲除

Question

我正在嘗試構建一個相對簡單的時間表，目前我的工作基本上是如何工作的，除非總計算不正確。以下是我迄今爲止：

小提琴：http://jsfiddle.net/grahamwalsh/1cbbyty9/

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
    <div class='timesheet'> 

     <form action='/someServerSideHandler'> 
     <p>You have asked for <span data-bind='text: selectedEmployees().length'>&nbsp;</span> timesheet(s)</p> 
    <table data-bind='visible: selectedEmployees().length > 0'> 
     <thead> 
      <tr> 
       <th>Employee Name</th> 
       <th>Monday</th> 
       <th>Tuesday</th> 
       <th>Wednesday</th> 
       <th>Thursday</th> 
       <th>Friday</th> 
       <th>Saturday</th> 
       <th>Sunday</th> 
       <th>Total Hours</th> 
       <th /> 
      </tr> 
     </thead> 
     <tbody data-bind='foreach: selectedEmployees'> 
      <tr> 
       <td data-bind="text: name"></td> 
       <td><input class='required number' data-bind='value: monday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: tuesday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: wednesday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: thursday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: friday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: saturday, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: sunday, uniqueName: true' /></td> 

刪除

<!-- ko if: availableEmployees().length > 0 --> 
     <select data-bind="value: employeeToBeAdded, options: availableEmployees, optionsText: 'name'"></select> 
     <button data-bind='click: addEmployee'>Add TimeSheet</button> 
    <!-- /ko --> 
    <button data-bind='enable: selectedEmployees().length > 0' type='submit'>Submit</button> 
</form> 

</div> 

淘汰賽：

var Employee = function Employee(name) { 
this.name  = ko.observable(name); 
this.monday = ko.observable(); 
this.tuesday = ko.observable(); 
this.wednesday = ko.observable(); 
this.thursday = ko.observable(); 
this.friday = ko.observable(); 
this.saturday = ko.observable(); 
this.sunday = ko.observable(); 
this.total  = ko.computed(function(){ return this.monday()+this.tuesday()+this.wednesday()+this.thursday()+this.friday()+this.saturday()+this.sunday();},this); 
}; 

var ViewModel = function ViewModel(employees) { 
var self = this; 

this.availableEmployees = ko.observableArray(employees); 
this.selectedEmployees = ko.observableArray([]); 
this.employeeToBeAdded = ko.observable(); 

this.addEmployee = function() { 
    var employee = self.employeeToBeAdded(); 
    self.employeeToBeAdded(null); 
    self.selectedEmployees.push(employee); 
    self.availableEmployees.remove(employee);   
}; 

self.removeEmployee = function(employee) { 
    self.availableEmployees.push(employee); 
    self.selectedEmployees.remove(employee); 
}; 

self.save = function(form) { 
    alert("Could now transmit to server: " + ko.utils.stringifyJson(self.employees)); 

}; 
}; 

var viewModel = new ViewModel([ 
new Employee('SoSponsored'), 
new Employee('Planning Poker'), 
new Employee('Highlight Manager'), 
new Employee('Other Project') 
]); 

ko.applyBindings(viewModel); 

CSS：

body { font-family: arial; font-size: 14px; } 

    .timesheet { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; } 
    .timesheet input { font-family: Arial; } 
    .timesheet b { font-weight: bold; } 
    .timesheet p { margin-top: 0.9em; margin-bottom: 0.9em; } 
    .timesheet select[multiple] { width: 100%; height: 8em; } 
    .timesheet h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; } 

.timesheet table, .liveExample td, .liveExample th { padding: 0.2em; border- width: 0; } 
.timesheet td input { width: 5em; } 
tr { vertical-align: top; } 
.timesheet input.error { border: 1px solid red; background-color: #FDC; } 
.timesheet label.error { display: block; color: Red; font-size: 0.8em; } 
.timesheet th { font-weight: bold; } 

li { list-style-type: disc; margin-left: 20px; } 

Answer 1

目前算起總學時你串聯添加數字串代替。在您的total計算文本轉換成數字使用parseInt然後添加的所有項目：

this.total = ko.computed(function(){ 
    return parseInt(this.monday() || "0") + 
     parseInt(this.tuesday() || "0") + parseInt(this.wednesday() || "0") + 
     parseInt(this.thursday() || "0") + parseInt(this.friday() || "0") + 
     parseInt(this.saturday() || "0") + parseInt(this.sunday() || "0"); 
    }, 
this);