使用 Knockout 和 Mapping 插件时如何将错误附加到字段？

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);
            },
        });
    };
}

当 put 失败时，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. 没有key时如何绑定错误文本？
2. 如何在每个div下按key绑定“过滤”？

Answer 1

在您的代码 this.errors 中声明为可观察的 array，但根据您的 JSON 响应，您分配了一个 object。

您可能会发现我经常使用的方法来扩展特定可观察对象和可观察数组的功能很有用。我只是用有用的方法（和/甚至计算值）来扩展它们

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>