Knockout Components to Structure Your Apps Better

| by Roopesh Shenoy Follow 0 Followers on Aug 25, 2014. Estimated reading time: 2 minutes |

Knockout 3.2.0 has recently been released. One of the biggest improvements is the introduction of Components, which along with Custom elements, allows you to break your app into reusable widgets, sections or pages.

Components combine a viewmodel and a template in an encapsulated package. A simple example could be a navigation bar or a progress panel. You can use "component binding"to bind these components to regular div elements, but there is a second, more powerful way to use them in your app - by using custom elements.

For example, you can define a component like so (note in a real project, you would have the view and the view model in separate files) -

ko.components.register('like-widget', {
    viewModel: function(params) {
        // Data: value is either null, 'like', or 'dislike'
        this.chosenValue = params.value;
        // Behaviors = function() { this.chosenValue('like'); }.bind(this);
        this.dislike = function() { this.chosenValue('dislike'); }.bind(this);
      '<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 class="result" data-bind="visible:chosenValue">\
          You <strong data-bind="text: chosenValue"></strong> it\

And then use it as so in your view -

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

Along with the corresponding view-model with property "products". The advantage being that the like-widget is now reusable in multiple places, and all the logic related to this piece is separately encapsulated. Breaking your app into several such components can make it vastly easier to build, understand and maintain. 

This looks very similar to the AngularJS philosophy of extending html elements by using custom components as well as the custom elements section of the WebComponents standard which is currently evolving. Developers are definitely excited about this. 

There are also several other improvements in this release -

  • ko.pureComputed - a new specialisation of ko.computed with better performance and memory management. This feature is applicable only for computed observables whose evaluator does not cause any side effects, and whose value depends solely on the values of other observables in the application. In other words, when there are no hidden values or state outside of the dependency tracking infrastructure that affect the outcome of the evaluator.
  • A new "textInput" binding which binds a <input> or <textarea> with a viewmodel property for two-way updates. This is superior to the "value" binding because it handles all kinds of user inputs such as autocomplete, drag-and-drop and clipboard events.
  • "value" binding acts like "checkedValue" for checkboxes and radiobuttons. It has been a common mistake to use "value" instead of "checkedValue", so this change creates a fall-back option. "checkedValue" is still supported.

There are also several fixes - you can glance at the release notes for a full list of changes.

Knockout is a JavaScript MVVM library which comes with declarative bindings, 2-way updates between the DOM and the view-model, templating and a dependency tracking infrastructure.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you