エラーメッセージを表示するためのカスタムノックアウトバインド

Question

現在、検証エラーを表示するために仮想要素を使用しています（パスごとに1つ以上あります）。これによって消費される

<div data-bind="foreach: validationErrors"> 
    <!-- ko if: path == 'title' && type == 'validation' --> 
    <div class="field-validation-error text-danger" data-bind="text: message"></div> 
    <!-- /ko --> 
</div> 

例のエラーは、次のとおりです。

{ 
    path: 'title', 
    type: 'validation', 
    message: 'Title is required' 
} 

どのように私は、カスタムバインディングを使用して同じことを達成することができますか？私は、私が何らかの目的のためにやっていることに十分近い、わかりやすい例を見つけることができないようです。

Answer 1

シンプルなコンポーネントにそれをラップ：

ko.components.register('errors', { 
 
    viewModel: function(params) { 
 
     this.validationErrors = params.errors; 
 
    }, 
 
    template: 
 
     '<div data-bind="foreach: validationErrors">\ 
 
     <!-- ko if: path == "title" && type == "validation" -->\ 
 
     <div class="field-validation-error text-danger" data-bind="text: message"></div>\ 
 
     <!-- /ko -->\ 
 
     </div>' 
 
}); 
 

 
var model = { 
 
    errorsFromModel: ko.observableArray([ 
 
    {path: 'title', type: 'validation', message: 'Title is required'} 
 
    ]) 
 
}; 
 

 
ko.applyBindings(model); 
 

 
setTimeout(function() { model.errorsFromModel.push({path: 'title', type: 'validation', message: 'Another error added after 1 sec'}) }, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<errors params="errors: errorsFromModel"></errors>