2016-09-19 69 views
0

我有一個字符串屬性,一個int屬性和兩個其他模型列表的淘汰賽模型。在視圖中,我試圖驗證敲除對象中的屬性,此時只是確保它們存在。敲除驗證未能觸發

我正在使用Knockout.Validation庫,使用擴展。

我碰上了,就是當我按一下按鈕就發過驗證請求的問題,有一個JavaScript錯誤self.isValid不是一個函數

我在網上查過了,看起來其他人有這些問題,只有他們曾經解決過的任何解決方案都不適合我。

的Javascript模型

EditTestStep

var StringParameterViewModel = function(data) { 
    var self = this; 

    if (data != null) { 
     ko.mapping.fromJS(data, stringParameterMapping, self); 
    } else { 
     self.ParameterName = ko.observable().extend({ 
      required: {message: 'Please enter a parameter name.'} 
     }); 
     self.StringValue = ko.observable().extend({ 
      required: { message: 'A value for the parameter is needed.' } 
     }); 

    } 
} 

var XmlParameterViewModel = function (data) { 
    var self = this; 

    if (data != null) { 

     ko.mapping.fromJS(data, xmlParameterMapping, self); 
    } else { 
     self.ParameterName = ko.observable().extend({ 
      required: true 
     }); 
     self.XmlValue = ko.observable().extend({ 
      required: true 
     }); 
    } 
} 

var xmlParameterMapping = { 
    craete: function(options) { 
     return XmlParameterViewModel(options.data); 
    } 
} 


var stringParameterMapping = { 
    create: function(options) { 
     return StringParameterViewModel(options.data); 
    } 
} 

var editTestStepMapping = { 
    create: function(options) { 
     return EditTestStepViewModel(options.data); 
    } 
} 

var EditTestStepViewModel = function(data) { 
    var self = this; 
    if (data != null) { 
     ko.mapping.fromJS(data, {}, self); 

    } else { 
     self.StringParameters = ko.observableArray(); 
     self.XmlParameters = ko.observableArray(); 
     self.TestStepName = ko.observable().extend({ 
      required: true 
     }); 
    } 

    self.saveTestStep = function() { 
     var dataToSend = ko.mapping.toJSON(self); 
     $.ajax({ 
      url: "/Home/SaveEdit/", 
      type: "POST", 
      contentType: "application/json", 
      data: dataToSend 
     }); 
    }; 

    self.Errors = ko.validation.group(self); 

    self.checkValid = function() { 
     if (self.isValid()) { 
      alert('All ok!'); 
     } else { 
      self.Errors.showAllMessages(); 
     } 
    } 


} 


var validationOptions = { 
    insertMessages: true, 
    decorateElement: true, 
    errorElementClass: 'errorCSS', 
    messagesOnModified: true, 
    debug: true, 
    grouping: { 
     deep: true, 
     observable: false //Needed so added objects AFTER the initial setup get included 
    } 
}; 

ko.validation.init(validationOptions, true); 

查看

@using System.Web.Script.Serialization 
@model MvcNewPatternsDemo.Models.EditTestStepViewModel 


@{ string data = new JavaScriptSerializer().Serialize(Model);} 

@{ 
    ViewBag.Title = "Home Page"; 
} 
@section scripts{ 


    <script src="~/Scripts/knockout-3.4.0.js"></script> 
    <script src="~/Scripts/knockout.validation.js"></script> 
    <script src="~/Scripts/knockout.mapping-latest.js"></script> 
    <script src="~/Scripts/jquery-1.10.2.js"></script> 
    <script src="~/Scripts/EditTestStep.js"></script> 
    <script type="text/javascript"> 
     var editTestStepViewModel = new EditTestStepViewModel(@Html.Raw(data)); 
     ko.applyBindingsWithValidation(editTestStepViewModel); 
    </script> 
    } 

<form> 

    <input class="form-control" name="ParameterName" data-bind="value: TestStepName"/> 
    <input class="form-control" name="TestStepId" data-bind="value: TestStepId"/> 

    <table class="table table-striped"> 
     <tr> 
      <th>StringParameters</th> 
     </tr> 

     <tbody data-bind="foreach: StringParameters"> 
     <tr> 
      <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName"/></td> 
      <td class="form-group"> <input name="StringValue" class="form-control input-sm" data-bind="value: StringValue"/></td> 
     </tr> 
     </tbody> 

    </table> 

    <table class="table table-striped"> 
     <tr> 
      <th>XmlPara</th> 
     </tr> 

     <tbody data-bind="foreach: XmlParameters"> 
      <tr> 
       <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName" /></td> 
       <td class="form-group"> <input name="XmlValue" class="form-control input-sm" data-bind="value: XmlValue" /></td> 
      </tr> 
     </tbody> 

    </table> 


</form> 




<div class="row"> 
    <button data-bind="click: saveTestStep" type="submit">Save Test Step</button> 
    <button data-bind="click: checkValid"type="button">Check Valid</button> 
</div> 

模式

namespace MvcNewPatternsDemo.Models 
{ 



    public class TestStepDisplayModel 
    { 
     public int TestStepId { get; set; } 
     public string TestStepName { get; set; } 

    } 

    public class StringParameterViewModel 
    { 
     public string ParameterName { get; set; } 
     public string StringValue { get; set; } 
    } 

    public class XmlParameterViewModel 
    { 
     public string ParameterName { get; set; } 
     public string XmlValue { get; set; } 
    } 


    [Serializable] 
    public class EditTestStepViewModel 
    { 
     public string TestStepName { get; set; } 
     public int TestStepId { get; set; } 
     public List<StringParameterViewModel> StringParameters { get; set; } 
     public List<XmlParameterViewModel> XmlParameters { get; set; } 

     public EditTestStepViewModel() 
     { 
      this.StringParameters = new List<StringParameterViewModel>(); 
      this.XmlParameters = new List<XmlParameterViewModel>(); 
     } 

    } 

} 

對控制器的ajax調用工作,並從對象的所有數據正在發送,我只需要驗證功能。

+0

您是否調試過您的代碼以查看您的ko.observable()。extend({});曾經執行過? – Nathan

回答

1

我沒有在您的JavaScript中註冊您的擴展程序的地方看到一行。

嘗試在結尾處增加這樣的:

ko.validation.registerExtenders();