StopBubble using Binding Handler

StopBubble using Binding Handler

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<div class="btn-group"> 
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Facets
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" data-bind="stopBubble: true" >
    When selecting a checkbox, <br />
    this dialog should remain opened
    <!-- ko foreach: facets -->
    <li>
      <input type="checkbox" data-bind="checked: Visible" /> 
      <span data-bind="text: Name"></span>
    </li>
    <!-- /ko -->
  </ul>
</div>
<div id="list" data-bind="foreach: visibleFacets">
  <span data-bind="text: Name"></span>
</div>

CSS

#list {
  margin-top: 100px;  
}

JavaScript

ko.bindingHandlers.stopBubble = {
  init: function(element) {
    ko.utils.registerEventHandler(element, "click", function(event) {
         event.cancelBubble = true;
         if (event.stopPropagation) {
            event.stopPropagation(); 
         }
    });
  }
};

var data = {
  "Facets":[
    { "Name":"Facet1", "Hits": [
		{"Name":"apple", "Selected":true, "HitCount":4},
		{"Name":"banana", "Selected":false, "HitCount":5}
	]},
	{ "Name":"Facet2", "Hits": [
		{"Name":"horse", "Selected":false, "HitCount":5},
		{"Name":"monkey", "Selected":false, "HitCount":7}
	]}]  
}

var Model = function() {
  var self = this;
  self.facets = ko.observableArray([]);
  ko.utils.arrayForEach(data.Facets, function(fr) {
    ko.utils.arrayForEach(fr.Hits, function(f) {
      f.selected = ko.observable(f.Selected);
    });
    fr.AnySelected = ko.utils.arrayFilter(fr.Hits, function(f) {
      return f.selected();
    }).length > 0;    
    fr.Visible = ko.observable(fr.AnySelected);    
  });
  self.facets(data.Facets);
  self.visibleFacets = ko.computed(function() {
    return ko.utils.arrayFilter(self.facets(), function(f) {
      return f.Visible();
    });
  });
}

var vm = new Model();
ko.applyBindings(vm);