Knockout Component Example

Example component from knockoutjs.com

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<ul data-bind="foreach: products">
  <li class="product">
    <strong data-bind="text: name"></strong>
    <like-or-dislike params="value: userRating"></like-or-dislike>
  </li>
</ul>
<button data-bind="click: addProduct">Add a product</button>

JavaScript

// Component registration
ko.components.register('like-or-dislike', {
    viewModel: function(params) {
        this.chosenValue = params.value;
        this.message = params.message || "really";
        
        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 <span data-bind="text: message"></span> <strong data-bind="text: chosenValue"></strong> it\
      </div>'
});

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

// View model
function MyViewModel() {    
  this.products = ko.observableArray(); // Start empty 
}
MyViewModel.prototype.addProduct = function() {
  var name = 'Product ' + (this.products().length + 1);
  this.products.push(new Product(name));
}

// Bind
ko.applyBindings(new MyViewModel());