我写了一个Knockout组件,而ViewModel和模板是在单独的文件中,由RequireJs加载。
组件是一个包含很少输入字段的简单表单。现在我想在表单上添加Jquery Validation Plugins。我应该在哪些验证设置?在主html,或模板html,或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>
验证码:
$("#OrderTicketForm").validate({
rules: {
symbol: {required:true},
stock: {
required: true
}
});
答案 0 :(得分:0)
如果您询问10位开发人员,您将得到11个不同的答案。我个人会把它放在.js文件中。