2016-09-22 2 views
2

Ich schrieb eine Knockout-Komponente, während das ViewModel und die Vorlage in separaten Dateien sind, geladen von RequireJs.wo Jquery Validierungs-Plugin zu Knockout-Komponente hinzufügen

Die Komponente ist eine einfache Form mit wenigen Eingabefeldern. Jetzt möchte ich Jquery Validierung Plugins auf dem Formular hinzufügen. Welche Einstellungen sollte ich vornehmen? Auf der Haupt-HTML oder der Vorlage HTML oder ViewModel js?

Index.HTML

<order-ticket params="symbol:symbol,stockname:stockname,state:state,price:price,qty:qty"></order-ticket> 

<script type="text/javascript"> 
ko.components.register('order-ticket', { 
    viewModel: { require: 'files/component-order-ticket' }, 
    template: { require: 'text!files/component-order-ticket.html' } 
}); 

function MyViewModel() { 
    this.state = ko.observable('new'); 
    this.symbol = ko.observable('IBM'); 
    this.stockname = ko.observable('HSBC'); 
    this.price = ko.observable(100); 
    this.qty = ko.observable(50); 
} 

ko.applyBindings(new MyViewModel()); 

</script> 

/files/component-order-ticket.js

define(['knockout'], function (ko) { 
    function OrderTicketViewModel(params) { 
     this.symbol = (params && params.symbol || ''); 
     this.stockname = (params && params.stockname || ''); 
     this.price = (params && params.price || ''); 
     this.qty = (params && params.qty || ''); 
     this.state = (params && params.state || ko.observable('new')); 
    } 

    OrderTicketViewModel.prototype.emptySymbol = function() { 
     this.symbol(''); 
    }; 
    OrderTicketViewModel.prototype.changeState = function (state) { 
     this.state(state); 
    }; 
    return OrderTicketViewModel; 
}) 

/files/component-order-ticket.html

<form id="OrderTicketForm" method="post"> 
    <div> 
     Symbol: <input type="text" name="symbol" data-bind="value: symbol"><br /> 
     Stock: <span data-bind="text: stockname"></span><br /> 
     Price: <input type="text" name="price" data-bind="value: price"><br /> 
     Qty: <input type="text" name="qty" data-bind="value: qty"><br /> 
     <input type="submit" /> 
    </div> 
</form> 

Validation Code :

$("#OrderTicketForm").validate({ 
    rules: { 
     symbol: {required:true}, 
     stock: { 
      required: true 
     } 
    }); 

Antwort

0

Dies ist eines dieser Dinge, bei denen Sie, wenn Sie 10 Entwickler fragen, 11 verschiedene Antworten erhalten. Persönlich würde ich es in die .js-Datei einfügen.