Components

Components package UI markup, behavior, and state into reusable units. A component usually has:

a viewmodel
a template
a registration name
optional parameters

Use components when a section of UI is large enough to deserve its own boundary or when you want to reuse the same behavior in more than one place.

TKO supports three common ways to consume a component:

the component binding
custom elements
custom loaders for projects that need conventions or file-based resolution (more on loaders)

TKO also ships a class-based Component abstraction for cases where you want a richer component lifecycle than a plain registration object.

Start with an explicit registration. Keep the example inline while you are learning the shape, then split the viewmodel and template out of line when it becomes part of a real app.

<ul data-bind="foreach: products">
    <li class="product">
        <strong data-bind="text: name"></strong>
        <like-widget params="value: userRating"></like-widget>
    </li>
</ul>

ko.components.register('like-widget', {
    viewModel: function(params) {
        this.chosenValue = params.value
        this.like = function() { this.chosenValue('like') }.bind(this)
        this.dislike = function() { this.chosenValue('dislike') }.bind(this)
    },
    template:
        '<div class="like-or-dislike" data-bind="visible: !chosenValue()">' +
            '<button data-bind="click: like">Like it</button> ' +
            '<button data-bind="click: dislike">Dislike it</button>' +
        '</div>' +
        '<div class="result" data-bind="visible: chosenValue">' +
            'You <strong data-bind="text: chosenValue"></strong> it' +
        '</div>'
})

function Product(name, rating) {
    this.name = name
    this.userRating = ko.observable(rating || null)
}

function MyViewModel() {
    this.products = [
        new Product('Garlic bread'),
        new Product('Pain au chocolat'),
        new Product('Seagull spaghetti', 'like')
    ]
}

ko.applyBindings(new MyViewModel())

Components

Components

Example: a like/dislike widget

Next Steps