Question

我在Knockout视图模型中有一个数组，如下所示：

this.Activities = ko.observableArray([
{ "date": "28/11/2012 00:00:00",
  "activities": [
     { "company": "BOW",
       "description": "Backup Checks",
       "length": "60"
     },
     { "company": "AMS",
       "description": "Data Request",
       "length": "135"
     },
  ]},
{ "date": "30/11/2012 00:00:00",
  "activities": [
     { "company": "BOW",
       "description": "Backup Checks",
       "length": "60"
     },
     { "company": "SLGT",
       "description": "Software Development",
       "length": "240"
     },
     { "company": "BOW",
       "description": "Data Request",
       "length": "30"
     },
  ]},
]);

我使用此代码向其添加新元素：

this.Activities.push(new NewActivity(company, description, length, fullDate));

使用NewActivity功能：

function NewActivity(company, description, length, date) {
    this.date = date;
    this.activities = [{ "company": company, "description": description, "length": length }];
}

它工作正常。但是，它每次发布时都会创建一个全新的对象。我需要在代码检查已创建对象的日期时实现一个条件。如果新创建的对象具有相同的日期，则应将活动详细信息添加到该日期的Activities数组中的activities数组中。

我该怎么做？

Activities数组的所有数据都来自MVC应用程序中强类型视图中的模型：

this.Activities = ko.observableArray([
        @foreach (ActivitySet aSet in Model)
        {
            @:{ "date": "@aSet.Date",
            @:"activities": [
                 foreach(Activity a in aSet.Activities)
                 {
                     @:{ "company": "@a.Companies.Select(c => c.Title).Single()",
                       @:"description": "@a.Descriptions.Select(c => c.Title).Single()",
                       @:"length": "@a.LengthInMinutes"
                     @:},
                 }
            @:]},
        }
]);

Answer 1

我建议您创建一些描述您的活动的实体：

// Details
function ActivityDetails(company, description, length) {
    this.company = ko.observable(company);
    this.description = ko.observable(description);
    this.length = ko.observable(length);
}

// Activity
function Activity(date, activityDetails) {
    this.date = ko.observable(date);
    this.details = ko.observableArray(activityDetails);
}

您可以通过以下方式控制活动：

function ViewModel () {
    var self = this;

    this.Activities = ko.observableArray([
        // Activities here
    ]);

    this.addActivity = function (activity) {
        var flag = false;
        ko.utils.arrayMap(self.Activities(), function (item) {
            // Flag is here so it doesn't keep checking further in iterations
            if (!flag) {
                if (item.date() === activity.date()) {
                    item.details.push(activity.details);
                    flag = true;
                }
            }
        });
        // Case where activity date was not found in existing records
        if (!flag) {
            self.Activities.push(activity);
        }
    }
}

这要求您的视图模型具有自定义添加方法，我提供了一个示例。请注意，在我解析可观察值的任何地方，所以如果使用不可观察的值，则删除函数调用。

Knockout.js更新数组中的数组

1 个答案: