2016-09-22 32 views
2

我编写了Knockout组件,而ViewModel和模板位于由RequireJs加载的单独文件中。将Jquery Validation插件添加到Knockout组件的位置

该组件是一个简单的形式,只有很少的输入字段。现在我想在表单上添加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

这是其中的一种情况,如果你问10位开发人员,你会得到11种不同的答案。就我个人而言,我会把它放在.js文件中。