Javascript 敲除在10条记录数据集上应用绑定花费太多时间

我得到了一个10条记录的数据集，从服务器发送到我的模型中，到目前为止，一切都很顺利，但当它到达ko.applyBindings代码行时，几乎需要10秒钟

请查看我的JSFIDLE以获取代码示例：

任何帮助都将是巨大的，我需要知道是什么让我花了这么长时间，我以为这是实体框架，但在测试后，这种想法被排除了

谢谢

下面是我写的代码：

JS

HTML

---

页面在最后一个Chrome中快速加载。你使用哪种浏览器？在所有3种主要浏览器上测试，最新版本为Chrome、Firefox、Opera，添加了一些日志，在我的机器上加载不到一秒钟。在我的示例中，在JSFIDLE上提供的下拉列表中没有那么多数据。也许这就是问题所在？！！当每个项目都绑定到DOM中的某个对象时，KO构建大型observableArray的速度可能会很慢。这个问题会给你一些好的提示：

var Model = function () {
    var self = this;

    self.Maintenance = ko.observableArray([]);

    self.GroupUser = ko.observableArray([]);

    self.Assign = function (data, event) {
        var userID = $("#users" + data.ID()).val();
        var userName = $("#users" + data.ID() + " option:selected").text();
        if (userID != "-1") {
            if (data.AssignedTo() == null) {
                var RequestAssign = {
                    MaintenanceID: data.ID(),
                    UserID: userID,
                    MaintenanceType: data.Type()
                };
                $.post("../../Maintenance/AssignRequsetToUser", RequestAssign, function () {
                    data.AssignedTo(userName);
                    if (data.Type() == "Request") {
                        var CurrentDate = new Date();
                        data.StartDate(CurrentDate.getDay() + "/" + CurrentDate.getMonth() + "/" + CurrentDate.getFullYear());
                    }
                    $("#users" + data.ID()).val("-1");
                });
            }
            else {
                var RequestAssign = {
                    AssignID: data.AssignID(),
                    UserID: userID,
                    MaintenanceID: data.ID()
                };
                $.post("../../Maintenance/UpdateAssignRequsetToUser", RequestAssign, function () {
                    $.get("../../Maintenance/GetFullMaintenanceRecords", function () {
                        data.AssignedTo(userName);
                        $("#users" + data.ID()).val("-1");
                    });
                });
            }
        }
        else {
            alert("Please Select a User First!");
        }
    };

    self.CurrentPage = ko.observable(0);

    self.Pages = ko.observableArray([]);

    self.ChangePage = function (data, event) {
        $(".pagination li").removeClass("active disabled");
        self.CurrentPage(data);
    };

    self.checkCurrentPage = function (data) {
        if (self.CurrentPage() == data) {
            return "active disabled";
        }
    };
};

var Maintenance = function () {
    var self = this;
    self.ID = ko.observable();
    self.StartDate = ko.observable();
    self.EndDate = ko.observable();
    self.Comment = ko.observable();
    self.Type = ko.observable();
    self.AssignedTo = ko.observable();
    self.AssignID = ko.observable();
};

var CreateMaintenance = function (data) {
    var _maintenance = new Maintenance();
    _maintenance.ID(data.ID);
    _maintenance.StartDate(data.StartDate);
    _maintenance.EndDate(data.EndDate);
    _maintenance.Comment(data.Comment);
    _maintenance.Type(data.Type);
    _maintenance.AssignedTo(data.AssignedTo);
    _maintenance.AssignID(data.AssignID);

    return _maintenance;
};

var GroupUser = function () {
    var self = this;
    self.Name = undefined;
    self.ID = undefined;
};

var CreateGroupUser = function (name, id) {
    var _groupuser = new GroupUser();
    _groupuser.Name = name;
    _groupuser.ID = id;

    return _groupuser;
};

var IntializeEvents = function () {
    $(".text-danger").tooltip();
    $(".text-success").tooltip();
};

var GetMaintenance = function () {
    $.get("../../Maintenance/GetFullMaintenanceRecords", OnGetSuccess);
};

var OnGetUsersSuccess = function (data) {
    var result = JSON.parse(data);

    result.forEach(function (obj) {
        ModelInstance.GroupUser.push(CreateGroupUser(obj.Name_en, obj.id));
    });

    ko.applyBindings(ModelInstance);

    IntializeEvents();
};

function Chunk(Arr, ChunkSize) {
    var Set = [];

    var PageCount = 0;

    for (var Page = 0; Page < Arr.length; Page += ChunkSize) {
        var TempArr = Arr.slice(Page, Page + ChunkSize);

        var ObservableItemArr = [];

        TempArr.forEach(function (obj) {
            ObservableItemArr.push(CreateMaintenance(obj));
        });

        Set.push(ko.observableArray(ObservableItemArr));

        ModelInstance.Pages.push(PageCount);

        PageCount++;
    }

    return Set;
}

var OnGetSuccess = function (data) {
    var result = JSON.parse(data);

    ModelInstance.Maintenance(Chunk(result, 10));

    $.get("../../Maintenance/FillDropUsers", OnGetUsersSuccess);
};

var ModelInstance = new Model();

$(document).ready(function () {
    GetMaintenance();
});

<section data-bind="foreach: Pages">
        <article data-bind="visible: $root.CurrentPage() == $data">
            <table style="margin-bottom: 0" class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <td>
                            <span>Start Date</span>
                        </td>
                        <td>
                            <span>End Date</span>
                        </td>
                        <td>
                            <span>Maintenance Status</span>
                        </td>
                        <td>
                            <span>Type</span>
                        </td>
                        <td>
                            <span>Assign Status</span>
                        </td>
                        <td>
                            <span>Assign</span>
                        </td>
                        <td>
                            <span>Parts Replaced</span>
                        </td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $root.Maintenance()[$data]">
                    <tr>
                        <td data-bind="text: StartDate"></td>
                        <td data-bind="text: EndDate"></td>
                        <td>
                            <span style="cursor: pointer;" data-bind="visible: StartDate() == '', text: 'Waiting'" class="text-warning"></span>
                            <span style="cursor: pointer;" data-bind="visible: StartDate() != '' && EndDate() == '', text: 'Pending'" class="text-success"></span>
                            <span style="cursor: pointer;" data-bind="visible: EndDate() != '', text: 'Closed'" class="text-danger"></span>
                        </td>
                        <td data-bind="text: Type"></td>
                        <td style="text-align: center; font-size: 24px;">
                            <span style="cursor: pointer;" data-bind="visible: AssignedTo() == null, attr: { title: 'Not Assigned' }" data-toggle="tooltip" data-placement="top" class="text-danger">●</span>
                            <span style="cursor: pointer;" data-bind="visible: AssignedTo() != null, attr: { title: AssignedTo(), 'data-original-title': AssignedTo() }" data-toggle="tooltip" data-placement="top" class="text-success">●</span>
                        </td>
                        <td style="text-align: center;">
                            <select style="width: 165px;" class="btn btn-default" data-bind="attr: { id: 'users' + ID() }">
                                <option value="-1">-- Select --</option>
                                <!-- ko foreach: $root.GroupUser -->
                                <option data-bind="value: ID, text: Name"></option>
                                <!-- /ko -->
                            </select>
                            <button style="width: 110px;" data-bind="click: $root.Assign" class="btn btn-warning">Assign</button>
                        </td>
                        <td>
                            <a class="btn btn-primary form-control" href="#" target="_blank" data-bind="attr: { href: 'GetAllPartsByMaintenance_ID/' + ID() }">View Parts</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>
    </section>
    <ul class="pagination" data-bind="foreach: Pages">
        <li data-bind="attr: { id: 'Page' + $index(), 'class': $root.checkCurrentPage($data) }, click: $root.ChangePage"><a href="#" data-bind="    text: $data"></a></li>
    </ul>