如何在使用Knockout和Mapping插件時將錯誤附加到字段？

我是Knockout.js新手，試圖弄清楚事情。我有這個模型爲我的用戶：如何在使用Knockout和Mapping插件時將錯誤附加到字段？

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": "[email protected]", 
    "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>

如何綁定到時候有沒有關鍵錯誤文本？
如何綁定「過濾」通過在每個div關鍵？

來源

2017-02-11 Svish

在你的代碼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>

來源

2017-02-12 15:47:04

\ *捂臉\ *，沒想到的是，它是一個對象。在PHP中它是一個關聯數組，並且我認爲每個字段也可能有多個錯誤，但實際上我沒有。將嘗試你的擴展，這看起來非常方便，明天。只是我在 – Svish

之後的提示讓它工作！謝謝 – Svish

如何在使用Knockout和Mapping插件時將錯誤附加到字段？

回答

相關問題