2016-05-10 1 views
2

に、私は、次のJSオブジェクトを持って観察可能な値は、$インデックス()、$データなどを取得します親JSオブジェクトに空のTournamentPlayerオブジェクトを追加するには、次のコードを使用して:KOValidationはエラーメッセージ

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

私はでobservable値のようなKOデータ、$index()$data()などを取得したいですextend機能、どうすればいいですか?

答えて

1

私の最初の考えは、このように、それはユニットテスト可能作り、ビューモデルへのインデックスを符号化することにより、これを行うことでした。

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)のプレイヤーでを構築すると、pushが配列に入る前に一度呼び出されるため、正しく動作します(したがって、すべてが-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>

ないきれいな、そしてI競合することを歓迎しますが、私はこれまでのところ最高のものを考え出すことができました...

+0

'GetNr'関数の' p'パラメータに空白のオブジェクトがあります – seadrag0n