使用挖空计算可观察数组的百分比
本文关键字:观察 数组 百分比 计算 | 更新日期: 2023-09-27 18:32:39
我有一个嵌套的ObservableArray任务,按类别分组,我正在尝试计算完成百分比。 现在,我认为计算值是要走的路,所以我正在尝试按照下面的代码使用它。 我甚至只是试图返回一个观察到的字段,并在我的视图中显示它。
问题是,我没有返回任何值。 我的做法是错误的吗?
@model DTO
<div data-bind="with: TasksByCategory">
<div class="summaryGroup" data-bind="template: {name: 'CategoryTemplate', foreach: TasksByCategory}"></div>
</div>
@section Scripts{
<script src="~/Scripts/ViewModel/Details.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/Bindings/date.js"></script>
<script type="text/html" id="CategoryTemplate">
<h3 data-bind="text: category_name, click:$parents[$parents.length - 1].ShowHide"></h3>
<div>
<span data-bind="text: pct"></span>
<div data-bind="template: {name: 'SubCategoryTemplate', foreach: Subcategories }" class="TaskCategory"></div>
<div data-bind="template: {name: 'TaskTemplate' , foreach: tasks } " class="TaskCategory"></div>
</div>
</script>
<script type="text/html" id="SubCategoryTemplate">
<h4 data-bind="text: category_name, click: $parents[$parents.length - 1].ShowHide"></h4>
<div class="Items" data-bind=" template: {name: 'TaskTemplate' , foreach: tasks } "></div>
</script>
<script type="text/html" id="TaskTemplate">
<table>
<tr>
<td><strong data-bind=" text:task_name" style="font-weight:bold"></strong></td>
<td>
<select data-bind="options: $parents[$parents.length - 2].TaskStates, optionsText:'state', optionsValue:'id', value: task_state_id "></select>
</td>
</tr>
<tr>
<text data-bind="text:task_desc"></text>
</tr>
</table>
</script>
}
和我的脚本:
$(function () {
var viewModel = new NRIAndTasksVM();
viewModel.NRI.push(new NRI());
viewModel.TasksByCategory.push(new TasksByCategory());
viewModel.TaskStates.push(new TaskStates());
viewModel.GetNRIAndTasks();
ko.applyBindings(viewModel);
})
function NRIAndTasksVM() {
var self = this;
self.NRI = ko.observableArray([]);
self.TasksByCategory = ko.observableArray([]);
self.TaskStates = ko.observableArray([]);
self.GetNRIAndTasks = function () {
var self = this;
$.ajax({
type: "GET",
url: '/nris/GetNRIDetails',
dataType: 'json',
async: false,
data: { id: id },
success: function (data) {
self.NRI(data);
self.TasksByCategory(data);
self.TaskStates(data.TaskStates);
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
};
};
function NRI(data) {
var self7 = this;
self7.nri_id = ko.observable(data ? data.nri_id : "");
self7.cn_number = ko.observable(data ? data.cn_number : "");
self7.engineer = ko.observable(data ? data.engineer : "");
self7.date_start = ko.observable(moment(data ? data.date_start : "").format("MM/DD/YYYY"));
self7.completion_percentage = ko.observable(data ? data.completion_percentage : "");
self7.products = ko.observableArray(data ? data.products : "");
self7.new_chemicals = ko.observable(data ? data.new_chemicals : "");
self7.new_laborcodes = ko.observable(data ? data.new_laborcodes : "");
self7.new_equipment = ko.observable(data ? data.new_equipment : "");
self7.nri_state_id = ko.observable(data ? data.nri_state_id : "");
}
function TasksByCategory(data) {
var self2 = this;
self2.category_id = ko.observable(data ? data.category_id : "");
self2.category_name = ko.observable(data ? data.category_name : "");
self2.parent_category_id = ko.observable(data ? data.parent_category_id : "");
self2.Subcategories = ko.observableArray(data ? ko.utils.arrayMap(data.Subcategories(), function (item) {
var cat = new TasksByCategory(item);
return cat;
}): "");
self2.tasks = ko.observableArray(data ? ko.utils.arrayMap(data.tasks(), function (t) {
return new Task(t);
}): "");
self2.pct = ko.computed(function () {
return "hello";
});
// var totalActual = 0;
// var totalPossible = 0;
// ko.utils.arrayForEach(self2.tasks(), function (Task) {
// if (Task.task_state_id() != -1) {
// totalAcutal += Task.task_state_id();
// totalPossible += 3;
// }
// });
// if (totalActual != 0)
// return ("yes");
// else
// return "N/A";
//}, self2);
}
function Task(data) {
var self3 = this;
self3.task_id = task_id;
self3.task_name = ko.observable(data.task_name);
self3.task_desc = ko.observable(data.task_desc);
self3.task_state_id = ko.observable(data.task_state_id);
}
function TaskStates(data) {
this.TaskStates = ko.observableArray(ko.utils.arrayMap(data, function (item) {
return new TaskState(item.id, item.state);
}));
}
function TaskState(id, state) {
var self4 = this;
self4.id = ko.observable(id);
self4.state = ko.observable(state);
}
你可以根据我的理解做这样的事情.尽量避免正常的for
循环尝试使用ko.utils
函数,这提供了灵活性。
self2.percentage = ko.computed(function () {
var totalActual = 0;
var totalPossible = 0;
ko.utils.arrayForEach(self.tasks(),function(task){
if (task.task_state_id != -1) {
totalAcutal += task.task_state_id;
totalPossible += 3;
}
});
if (totalActual != 0) // i belive you trying to finding % for overall
return (totalActual / totalPossible);
else
return "N/A";
}, self2);