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);

计算的可观察的淘汰赛

1 个答案: