Getting Started

Knockout-component is a try to solve the problem of creating reusable code for KnockoutJS. Knockout-component idea is in combining view model and corresponding template in one reusable piece - component.

Let's try to create a peace of dynamic JavaScript UI and see how one may be wraped in a component and used later. For example it will be a labeled value with inplace edit functionality. So it will be a label:

   <label> Caption: </label>

with displaying value:

   <label> Caption: </label><span>Value</span>

Let's create Viewmodel and add bindings to markup:

  var vm = { 
        value: ko.observable;
      };  

   <label> Caption: </label><span data-bind='text:value'>Value</span>

It looks now like KnockoutJS basic tutorial. So let's add editing functionality. Next to value will be a link switching a into text input, so we can edit value. We'll also need buttons to confirm our edit operation or cancel it switching UI back into display mode.

Markup first:

<label> Caption: </label>
<!-- ko ifnot: editing -->
   <span data-bind='text: value'></span> 
   <a href='void:' data-bind='click:doEdit'>edit</a>
<!-- /ko -->
<!-- ko if: editing -->
   <input type='text' data-bind='value: _value'> 
   <button data-bind='click:doSave'>Save</button>
   <button data-bind='click:doCancel'>Cancel</button>
<!-- /ko -->

View model:

var
vm = {
    value: ko.observable('Value'),
    _value: ko.observable(),
    editing: ko.observable(false)
};

vm.doSave = function() {
    vm.value(vm._value());
    vm.editing(false);
}
vm.doCancel = function() {
    vm.editing(false);
}
vm.doEdit = function() {
    vm._value(vm.value());
    vm.editing(true);
}

So we have added editing observable indicating that we are in edit state, and _value observable to store our value while we are in edit mode. You may play with that piece of code in this fiddle.

This code has good functionality to reuse and is worth of creating a component. But we need to make it a bit more general. As we would need different captions for different values in future. Let's add a binding for caption:

...
<label> <span data-bind='text:caption'></span>: </label>
...

and corresponding observable to view model.

 ...
 vm.caption = ko.observable('Caption');
 ...

Whole code:

<label> <span data-bind='text:caption'></span>: </label>
<!-- ko ifnot: editing -->
   <span data-bind='text: value'></span> 
   <a href='void:' data-bind='click:doEdit'>edit</a>
<!-- /ko -->
<!-- ko if: editing -->
   <input type='text' data-bind='value: _value'> 
   <button data-bind='click:doSave'>Save</button>
   <button data-bind='click:doCancel'>Cancel</button>
<!-- /ko -->

var
vm = {
    ko.observable('Caption'),
    value: ko.observable('Value'),
    _value: ko.observable(),
    editing: ko.observable(false)
};

vm.doSave = function() {
    vm.value(vm._value());
    vm.editing(false);
}
vm.doCancel = function() {
    vm.editing(false);
}
vm.doEdit = function() {
    vm._value(vm.value());
    vm.editing(true);
}

This still looks like basic KnockoutJS tutorial...

Now it's time for knockout-componet to come on scene.