2015-04-17 48 views
4

我有一個Knockout.Validation方案,我認爲這個方案相當普遍,但是還沒有找到一個解決方案,搜索網站和本網站上的各種答案。Knockout.Validation未顯示初始渲染後加載的屬性的錯誤消息

我正在驗證的屬性不會在ajax調用之前添加到knockout observable中。當驗證被觸發時,驗證失敗,並且在我的驗證組中發生錯誤,但錯誤消息未顯示在頁面上。我已經確認所有的驗證都是通過向初始渲染髮生時確實存在的屬性添加驗證來進行的,並且該消息顯示了該屬性。

我知道我可以設置屬性的默認值,但我不希望你必須這樣做。當我手動添加驗證消息與validationMessage數據綁定屬性它拋出一個js錯誤,因爲該屬性不存在,當淘汰賽首次通過.....未捕獲TypeError:無法處理綁定「validationMessage:function(){返回BlogPost()。Title}「 消息:無法讀取未定義的屬性'extend'。

看到這個plunk的例子... http://plnkr.co/edit/OhUw8wP2uNypulbcOIbz?p=preview

self.Errors = ko.validation.group(this, { deep: true }); 
    self.Count(self.Errors().length); 
    if (self.Errors().length === 0) { 
     alert("no errors"); 
    } 
    else { 
     self.Errors.showAllMessages(); 
    } 

它正在使用require js,但是對於驗證消息顯示的標準方案而言,這不會引起任何問題。

我在這裏錯過什麼來得到這個工作?

回答

2

這是非常乾淨的...移動你的observables直到主視圖模型,並保持updateBlogPost只是一個方法(沒有屬性...因爲它應該是)。

這允許您在加載博客帖子後調用self.Errors.showAllMessages()。不確定在更改後需要更新方法嗎?

function EditBlogPostViewModel(params) { 

    var self = this; 
    self.BlogPost = ko.observable({}); 
    self.ErrorsCount = ko.observable(0); 

    self.Test = ko.observable("").extend({ required: true }); 
    self.Count = ko.observable(0); 
    self.Errors = ko.validation.group(this, { deep: true }); 
    self.Count(self.Errors().length); 

    blogApiService.getCategories().then(function (categories) { 
     return blogApiService.getBlogPost(params.id).then(function (post) { 
      self.BlogPost(new BlogPost(post, categories)); 
      self.Errors.showAllMessages(); 
     }); 
    }); 

} 

EditBlogPostViewModel.prototype.updateBlogPost = function() { 
    var self = this; 
    if (self.Errors().length === 0) { 
     alert("no errors"); 
    } 
    else { 
     self.Errors.showAllMessages(); 
    } 
}; 
+0

...發現您的問題的任何解決方案? –

+0

不幸的是找不到解決方案。你上面提出的建議並不能解決問題。 ko.validation.group不是可觀察的,所以當BlogPost observable設置時,驗證組不會更新。我可能沒有正確解釋這個問題。現在在更新後的plunk中更明顯,因爲我已將BlogPost的一個可觀察屬性設置爲空字符串。因此,當嘗試更新時,錯誤消息顯示了名爲Test的頂級驗證的observable,該驗證在早期設置,而不是BlogPost的可觀察屬性Title。 – JohnG

+0

@BrettGreen +1因爲展示了「ko.validation.group(this,{deep:true});」我並不瞭解這個深層次的選項,而且這是讓我的錯誤不被報告。記錄在哪裏?我無法在Wiki或其他地方找到它。 –

1

設置深:在self.errors屬性爲true,

self.errors = ko.validation.group(self, { deep: true }); 

並將此顯示錯誤消息,

ViewModel.errors.showAllMessages(true);   

希望工程!