0

如果标题解释了我需要实现的目标，我不是，但如果有人有更好的建议，我可以稍后更改。

我正在使用 KO 来管理客户端的一大堆数据。

这是基本的。

  1. 我有一份培训课程清单
  2. 每个都有一个培训课程部分的列表
  3. 每个培训课程部分都引用了其他列表中保存的项目。例如，我有一个活动列表（例如：骑自行车、跑步、游泳等）
  4. 每个活动都由一个 ID 标识，该 ID 在培训课程部分中使用，以标识用于特定课程的活动。

现在，所有这些列表都存储为可观察数组，并且列表的每个成员都是可观察的（我使用 KO.Mapping 来映射来自服务器的 JSON）

当我在 UI 中显示培训课程时，我想显示来自各种列表的各种信息

时长：1h30
活动：骑自行车
过程：间隔

为了将培训课程链接到其组件，我拥有的唯一信息是一个很好的 ID。我不确定如何将我的活动的名称（文本）数据绑定到 a <p>or<div>以便在我编辑活动时名称会更改（通过使用应用程序的某些功能）。

培训课程只有标识活动的ID，所以我不知道如何根据活动的ID绑定活动的名称。

希望这是有道理的，有人可以帮我弄清楚。我发现了很多关于如何绑定到可观察数组的信息，但没有找到解决 ID 和链接信息的信息。

4

1 回答 1

0

最简单的方法可能是制作自己的构造函数并手动链接数据。如果你真的想要，你可以使用映射，但你基本上必须做同样的手动链接，只是格式更详细。

这是示例实现的小提琴：http: //jsfiddle.net/aKpS9/3/

代码中最重要的部分是链接，您必须注意只创建一次活动对象，并在任何地方使用相同的对象，而不是为部件创建新的活动对象。

var TrainingSession = function(rawData, actualActivities){
    var self = this;
    self.name = ko.observable(rawData.name);
    self.parts = ko.observableArray(ko.utils.arrayMap(rawData.parts, function(rawPart){
        return ko.utils.arrayFirst(actualActivities(), function(ac){
            return ac.ID() == rawPart.ID;
        })
    }));
}

var Activity = function(rawData){
    var self = this;
    self.ID = ko.observable(rawData.ID);
    self.name = ko.observable(rawData.name);
}

var MainVM = function(rawData){
    var self = this;
    //first create an array of all activities
    self.activities = ko.observableArray(ko.utils.arrayMap(rawData.activities, function(rawAc){
        return new Activity(rawAc);
    }));

    self.trainingSessions = ko.observableArray(ko.utils.arrayMap(rawData.trainingSessions, function(session){
        return new TrainingSession(session, self.activities);
    }));

}
于 2013-11-09T11:37:22.640 回答