...
- References to all of the Javascript and CSS needed should be loaded at the page level. It should under the head tag.
example:<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Billing and Shipping Address</title>
<script src="js/3rdParty/jquery-3.2.1.min.js"></script>
<script src="js/3rdParty/knockout-3.4.2.js"></script>
<script src="js/3rdParty/bootstrap.min.js"></script>
<script src="js/3rdParty/knockout.validation.min.js"></script>
<!--Solved icons issue-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/eb6.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<script src="js/configuration/ebConfig.js"></script>
<script src="js/UserContext.js"></script>
<script src="js/ShoppingCart.js"></script>
<script src="js/PaymentSummary.js"></script>
<script src="js/BillingShippingAddress.js"></script>
</head> Need to define div element with ID attribute for loading control on the html page. If page having two controls then add two coloum div with ID on page.
example:
<div class="ebBody ebWrapper">
<div class="ebusiness-main-container ebClear">
<!--This div where the Billing and Shipping Address will come-->
<div class="col-md-8">
<div id="BillingShippingAddress"></div>
</div><!--This div where payment summary will come-->
<div class="col-md-4">
<div id="paymentSummary"></div>
</div>
</div>
</div>- JS Code should write <script type="text/javascript"> $(document).ready (function () {}); </script> block.
- Every page should have a userContext instance to check user is logged-in or Anonymous one. Based on this, the page will redirect to login page for authentication.
- Site-wide settings should be loaded and passed into the controls at the page level. This eliminates the dependency to the config file at the time the files are being loaded. Dependant objects will be passed into the control when an instance is created.
example:var options = {}
options.domElement = $('#BillingShippingAddress')[0];
options.templatePath = eb_Config.SitePath + "html/BillingShippingAddress.html";
eb_Config.config(options, eb_billingShippingAddress);options.shoppingCart = eb_shoppingCart.live;
options.userContext = eb_UserContext.live; - Control models should be instantiated at the page level inside of a document. ready jQuery object.
example ://Payment Summary Form.
var paymentSummaryDetails = {}
paymentSummaryDetails.domElement = $('#paymentSummary')[0];
paymentSummaryDetails.templatePath = eb_Config.SitePath + "html/PaymentSummary.html";
paymentSummaryDetails.shoppingCart = eb_shoppingCart.live;
paymentSummaryDetails.data = undefined;eb_Config.config(paymentSummaryDetails, eb_paymentSummaryDetails);
eb_paymentSummaryDetails.render(paymentSummaryDetails).done(function () {
eb_paymentSummaryDetails.live = new eb_paymentSummaryDetails.model(paymentSummaryDetails); //Page's live instance of the model. Handy for troubleshooting.
eb_paymentSummaryDetails.live.hidePaymentDetails(0);
ko.applyBindings(eb_paymentSummaryDetails.live, eb_paymentSummaryDetails.live.domElement);//Apply KO bindings, fire up the control
}).fail(function (data, msg, jhr) {
console.error('Failed to render payment Summary Details..' + data);
}); - Instances of the control's model should be added to that controls collection for reference. ex. ebLogin.live
- Once instance created then Apply KO bindings and fire up the control.
example: ko.applyBindings(eb_paymentSummaryDetails.live, eb_paymentSummaryDetails.live.domElement);//Apply KO bindings, fire up the control
...