javascript - KOValidation get observable value, $index(), $data 等错误信息

Question

我有以下 JS 对象:

var TournamentPlayer = function (PlayerName, Handicap, Nationality) {
    var self = this;

    self.PlayerName = ko.observable(PlayerName).extend({
        required: {
            message: 'Player No. ' + $index() + ' is required.' // How to get $index() here?
        }
    });
    self.Handicap = ko.observable(Handicap);
    self.Nationality = ko.observable(Nationality);
}

我需要捕获需要 PlayerName 的四个玩家的详细信息，我使用以下代码在父 JS 对象中添加空的 TournamentPlayer 对象:

self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));

我想获取 KO 数据，例如 observable 值、$index()、$data() 等在 KOValidation extend 函数中，我该怎么做？

Answer 1

我的第一个想法是通过将索引编码到 View 模型中来实现这一点，从而使其可进行单元测试:

var TournamentPlayer = function (PlayerName, Handicap, Nationality, GetNr) {
    var self = this;
    self.PlayerName = ko.observable(PlayerName).extend({
        required: {
            message: 'Player No. ' + GetNr(self) + ' is required.'
        }
    });
}

然后像这样实例化它们:

var Root = function() {
    self.TournamentPlayers = ko.observableArray([]);
    self.GetNr = function(p) { return self.TournamentPlayers.indexOf(p); };
    self.TournamentPlayers.push(new TournamentPlayer('', 0, '', self.GetNr));
    // etc.
}

但这不能正常工作，因为 GetNr(self) 在构建播放器时被调用一次，在它被推送之前ed 到数组中(因此它们都得到一个 -1 的 nr)。

不幸的是，扩展的 message 不能是(AFAICT)可观察的。有 formatting for custom rules ，我猜你可以从默认的 required 规则“继承”并给它格式化消息。

尽管如此，恐怕做你想做的最好的方法是在你的标记中呈现自定义消息，就像这样:

var TournamentPlayer = function (PlayerName, Handicap, Nationality) {
  var self = this;
  self.PlayerName = ko.observable(PlayerName).extend({
    required: {
      message: 'Player Name is required.'
    }
  });
}

var Root = function() {
  self.TournamentPlayers = ko.observableArray([]);
  self.GetNr = function(p) { return self.TournamentPlayers.indexOf(p); };
  self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
  self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
  self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
  self.TournamentPlayers.push(new TournamentPlayer('', 0, ''));
}

ko.applyBindings(new Root());

.validationMessage { display: none; }
.customValidationMessage { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<ul data-bind="foreach: TournamentPlayers">
  <li>
    Player Name: 
    <input data-bind="textInput: PlayerName">
    <span class="customValidationMessage" data-bind="visible: !PlayerName.isValid()">
      Player 
      <span data-bind="text: $index() + 1"></span>
      is required.
    </span>
  </li>
</ul>

不太好，我欢迎相互竞争的答案，但到目前为止我能想到的最好...