2016-09-19 9 views
0

Ich habe ein Knockout-Modell mit einer String-Eigenschaft, einer Int-Eigenschaft und zwei Listen anderer Modelle. In der Ansicht versuche ich, die Eigenschaften im Knockout-Objekt zu überprüfen, indem ich einfach sicherstelle, dass sie existieren.Knockout-Validierung, die nicht ausgelöst werden kann

Ich benutze die Knockout.Validation Lib, mit erweitert.

Das Problem, das ich in laufen, ist, wenn ich auf die Schaltfläche klicken Sie auf die Überprüfungsanforderung abzusenden, gibt es ein Javascript-Fehler self.isValid keine Funktion ist

ich es online geschaut haben auf und es scheint, dass andere die Probleme hatten, nur was immer Lösungen sie hatten, funktionierte nicht für mich.

Javascript Modell

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

Ansicht

@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> 

Modelle

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

    } 

} 

Der Ajax Aufruf an den Controller funktioniert und alle Daten aus dem Objekt gesendet wird, muss ich einfach die Validierung zu funktionieren.

+0

Haben Sie Ihren Code debuggen, um zu sehen, ob Ihre ko.observable(). Extend ({}); wurden jemals ausgeführt? – Nathan

Antwort

1

Ich sehe keine Zeile in Ihrem Javascript, wo Sie Ihre Extender registriert haben.

Try Zugabe dies am Ende:

ko.validation.registerExtenders();

Verwandte Themen