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