使用挖空计算可观察数组的百分比

本文关键字:观察 数组 百分比 计算 | 更新日期: 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);