Knockoutjs 如何根据 ID 对 observable 数组成员进行数据绑定

Question

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

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

这是基本的。

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

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

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

时长：1 小时 30 分
活动：骑自行车
过程：间隔

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

training session只有标识activity的id，所以不知道如何根据id绑定activity的名称。

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

Answer 1

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

这是示例实现的问题：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);
    }));

}