clickToOrder

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul data-bind="foreach: Items, clickToOrder: OrderedItems">
<li data-bind="text: name"></li>
</ul>

<h2>
Ordered:
</h2>
<ul data-bind="foreach: OrderedItems">
<li data-bind="text: name"></li>
</ul>

JavaScript

ko.bindingHandlers.clickToOrder = {
    init:
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
        {
        	var o = ko.unwrap(f_valueaccessor());
          var sctor = (o && o.selector) || '> *';
          var dest = (o && o.boundField) || o;
          
					$(el).find(sctor).on('click', function() {
          	alert('Boo');
          });
        }
};

var model = new function() 
{
	this.Items = ko.observableArray([
  	{ name: 'World' },
    { name: 'Hello' },
    { name: 'There' }
  ]);
  
  this.OrderedItems = ko.observableArray();
};

ko.applyBindings(model);