如何在使用挖空和映射插件时将错误附加到字段

Question

我是一个淘汰赛.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": "[e-mail]",
  "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>