Как присоединить ошибки к полям при использовании плагина для нокаута и картографии?

Question

Я новичок в Knockout.js, пытаясь понять, что происходит. У меня есть эта модель для моих пользователей:

var UserModel = function(data) 
{ 
    ko.mapping.fromJS(data, {}, this); 

    // Other non-relevant stuff 

    this.errors = ko.observableArray(); 

    this.save = function() 
    { 
     $.ajax({ 
      type: 'PUT', 
      url: API+'user', 
      data: ko.mapping.toJSON(this), 
      contentType: 'application/json', 
      context: this, 
      success: function(data) 
      { 
       ko.mapping.fromJS(data, {}, this); 
      }, 
      error: function(jqxhr, status, error) 
      { 
       if(jqxhr.responseJSON.errors) 
        this.errors(jqxhr.responseJSON.errors); 
      }, 
     }); 
    }; 
} 

Когда нанесенная терпит неудачу, errors получает, по крайней мере, насколько я могу видеть:

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

{ 
    "id": 2, 
    "email": "alice@example.com", 
    "name": "Alice", 
    "roles": "login", 
    // Other non-relevant stuff 
    "errors": { 
    "email": [ 
     "Invalid email domain." 
    ], 
    "name": [ 
     "Cannot be empty." 
    ] 
    } 
} 

Но, с шаблоном, как показано ниже, как можно Я показываю эти ошибки рядом с каждым полем, к которому относятся ошибки?

Шаблон я использую для пользователя в данный момент выглядит следующим образом:

<script type="text/html" id="user-row"> 
    <tr spellcheck="false"> 
     <td> 
      <div data-key="Name" data-bind="editable: editing, editableValue: name"></div> 
     </td> 
     <td> 
      <div data-key="Email" data-bind="editable: editing, editableValue: email"></div> 
     </td> 
     <td> 
      <div data-key="Roles" data-bind="editable: editing, editableValue: roles"></div> 
     </td> 
     <td> 
      <a href="javascript:void(0)" data-bind="click: save">Save</a> 
     </td> 
    </tr> 
</script> 

1. Как привязать к тексту ошибки, когда нет ключа?
2. Как привязать «отфильтрованный» ключ под каждым div?

Answer 1

В коде this.errors объявлен как наблюдаемый массива, но в соответствии с вашим ответом JSON вы назначаете объект.

Может оказаться полезным метод, который я использую очень часто для расширения функциональности конкретных наблюдаемых и наблюдаемых массивов. Я просто расширить их полезными методами (и/или даже вычисленных значений)

this.errors = ko.observable(); 

// extend observable with a method that allows to get errors for specified field if they exist 
this.errors.get = function(field){ 
    var errs = this.errors(); 
    return errs && errs[field] && errs[field].join(";"); 
}; 

// further in HTML under every div with editable binding: 
<span class="error" data-bind="text: errors.get('email')"></span>