2017-10-11 86 views
0

我目前使用虚拟元素来显示验证错误(每个路径可能有多个)。自定义敲除绑定来显示错误消息

<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' 
} 

我如何能实现使用自定义绑定是一回事吗?我似乎无法找到一个可以理解的例子,它足够接近我所做的任何用途。

+0

这听起来像你想有一个[成分](http://knockoutjs.com/documentation/component-overview.html) –

+0

我尝试了几种不同的方法,包括模板,最终将我引向一个组件。没有效果。最后,我发现了这个工作示例,它可以完成我所需的工作 - 对一个已过滤的数组执行操作。请注意,这不是我的[jsfiddle](http://jsfiddle.net/nYbpE/) – nlafratta

回答

0

简单它换到组件:

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>

+0

谢谢TSV,但不幸的是,这将无法正常工作。它只适用于名为title的字段。我需要一个组件来处理所有的领域('tit; e','description'等)。我想出了一种不使用组件的替代方法,但它并不比我原来的代码冗长(我将尽快发布)。我仍然想知道如何用一个组件来概括它。 – nlafratta

+0

@nlafratta:为什么不从'ko中删除'path ==“标题”'的条件if:path ==“title”&& type ==“validation”'。删除后,这将适用于所有路径。 – SpiderCode

相关问题