WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • Model
  • Knockout Integration

Was this helpful?

  1. Working with Components
  2. Configuration

Observables

PreviousEventsNextValidation

Last updated 4 years ago

Was this helpful?

Many WireBootstrap components including the 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.

let user = { UserName: "jkratz" };

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

Knockout Integration

When using , set the model attribute's ko value to the Knockout variable in order to keep the variable updated with changes.

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 reference page.

Bootstrap Select
Knockout
wire.ui.Component