Adding an Oracle JET Component to Your Page

Use the Oracle JET Cookbook recipes and API documentation for examples using the specific component you want to add to your page.

To add an Oracle JET component to your page:

Create the application that will house your main HTML5 page and supporting JavaScript. For additional information, see Getting Started with Oracle JET.
Identify the Oracle JET component that you want to add.

You can use the table in About the Oracle JET User Interface to identify the Oracle JET component.
Use the Oracle JET Cookbook for the recipe and markup to use to add your component to the HTML page.
All Oracle JET recipes include the basic format for initializing the component using Knockout.js data-bind syntax. The code below shows the markup for the ojInputDateTime example shown in the Date and Time Pickers demos.
```
<div id="div1">
  <label for="dateTime">Default</label>
  <input id="dateTime"
         data-bind="ojComponent: {component: 'ojInputDateTime', value: value}"/>
  <br/><br/>
  <span class="oj-label">Current component value is:</span>
  <span data-bind="text: value"></span>
</div>
```
In this example, the ojInputDateTime component is defined with the value option using the ojComponent binding, which is a Knockout binding that initializes the Oracle JET component. Each Oracle JET component includes additional options that are defined in the component's API documentation.

You can also use standard jQuery syntax to initialize the component, and the API documentation provides examples for doing so. However, the Oracle JET team recommends that you use the Knockout binding to simplify working with your view model.

For more information about Knockout.js data-bind syntax, see http://knockoutjs.com/documentation/binding-syntax.html.
Note:

If you use the foreach Knockout binding with an Oracle JET component, you cannot place it on the same node as the ojComponent binding. Instead, create a nested virtual element and place it before the ojComponent binding.
```

<label data-bind="attr: {for: id}"></label>                              
<input type="radio" name="beverage"
       data-bind="value: id, attr: {id: id},
         ojComponent: {component: 'ojButton', label: label}"/>

```
Use the Oracle JET Cookbook for example scripts and the syntax to use for adding the component to your RequireJS bootstrap file.
For example, the basic demo for the ojInputDateTime component includes the following script that you can use in your application.
```
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojdatetimepicker'], 
function (oj, ko, $)
{

  function SimpleModel()
  {
    this.value = ko.observable(oj.IntlConverterUtils.dateToLocalIso(new Date(2013, 0, 1)));
  }
   
  $(document).ready(function ()
  {
    ko.applyBindings(new SimpleModel(), document.getElementById('div1'));
  });
   
});
```
If you already have a RequireJS bootstrap file, compare your file with the Cookbook sample and merge in the differences. If you're not using RequireJS, you can use the HTML script element to add the $(document).ready(function()) to your page. However, RequireJS is required for internationalization and Oracle JET data visualization component support and is also recommended by the Oracle JET team. For details about working with RequireJS, see Using RequireJS for Modular Development.