# Observables

Many WireBootstrap components including the [Bootstrap Select](https://docs.wirebootstrap.com/components/bootstrap/select) component in this example support one-way observable functionality.  With this configured, any changes to the component will automatically update an object's property with the changed value.  In addition, if the property initially contains a value, this value will be selected by default.

## Model

To configure this observable functionality, set the `model` attribute's `obj` and `property` values as seen in the example below.  

```javascript
let user = { UserName: "jkratz" };

const select = new wire.bsSelect().render("#select", {
    ...
    model: { 
        obj: user, 
        property: "UserName" 
    },
});
```

## Knockout Integration <a href="#knockout" id="knockout"></a>

When using [Knockout](https://knockoutjs.com), set the model attribute's `ko` value to the Knockout variable in order to keep the variable updated with changes.

```javascript
let user = ko.observable("jkratz");

const select = new wire.bsSelect().render("#select", {
    ...
    model: { ko: user },
});
```

For more on the `model` configuration attribute and observables, visit the [wire.ui.Component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) reference page.