Question

我有一个队伍和排名得分收集跟踪，比如接力赛。

因此，当用户将团队纳入收集时，每个团队将根据排名获得积分。

<strong>Teams:</strong>
<!-- ko foreach: teams -->
<div>
    <input type="text" data-bind="value: name" />
</div>
<!-- /ko -->


function Team(name)
{
  var self = this;
  self.name = name'
}

function RankScoring(label, points){
  var self = this;
  self.label = label;
  self.points = points;
}

function AppViewModel()
{
  var self = this;
  self.teams = ko.observableArray([
    new Team('red'),
    new Team('blue')
  ]);
  self.rankscoring = ko.observableArray([
    new RankScoring('1st', ''),
    new RankScoring('2nd', ''),
    new RankScoring('3rd', ''),
  ]);
}

在这个特定的例子中，让我们说这个游戏有2个团队。因此，我只需要根据所涉及的团队数量使用RankScoring集合中的2个项目。 如何对RankScoring集合进行数据绑定，以便用户可以输入排名积分？我欢迎提供更简单的方法来完成这个想法。

**Teams:**
Red
Blue

**Scoring**
1st place - 10
2nd place - 5

Answer 1

添加一个计算器以显示可用等级的文本框：

self.availablerankscoring = ko.computed(function(){
    return self.rankscoring().slice(0,self.teams().length);
});

为可用的排名添加另一个foreach：

<!-- ko foreach: availablerankscoring -->
<div>
    <label data-bind="text: label"></label><input type="text" data-bind="value: points" />
</div>
<!-- /ko -->

Fiddle

每个有2个可观察的集合

1 个答案: