title: Bind knockout view model to Bootstrap Tree View
body: <p>I am trying to get Knockout and a Bootstrap-TreeView to work together.
  (The component: <a href="https://github.com/jonmiles/bootstrap-treeview" rel="nofollow noreferrer">https://github.com/jonmiles/bootstrap-treeview</a>)</p>
  
  <p>At the moment, I'm passing the JSON from an API call to the constructor of the View Model. This will change later but for simplicity, I'm doing this.</p>
  
  <p>What I need then is to bind click events to each node. So if I click the root node, nothing happens, click a folder, and I can get a list of all it's direct child text values (Just alert them for now), and if I click a file node, I alert the 'data' value from that node.</p>
  
  <p>Here's a fiddle to see what I have done so far.</p>
  
  <p><a href="https://jsfiddle.net/Cralis/h15n2tp7/" rel="nofollow noreferrer">https://jsfiddle.net/Cralis/h15n2tp7/</a></p>
  
  <p>My View Model simply initialises with the json data. And then a computed in the view model does the setup of the Tree View.</p>
  
  <pre><code>// Create the View Model.
  var ViewModel = function(jsonData) {
    var self = this;
    self.MyData = ko.observable(jsonData);
  
    ko.computed(function() {
      $('#tree').treeview({
          data: self.MyData()
        })
        .on('nodeSelected', function(event, data) {
          if (data.nodeLevel == 2) { // Are we clicking a File?
            alert("Clicked a File. Data: " + data.data)
  
          }
          else
          if(data.nodeLevel == 1) { // We're clicking a folder.
             alert("Clicked a folder. Would like to somehow alert a list of all child node text values.")
          }
        });
    })
  }
  
  // Create the View Model and initialise with initial data 
  var vm = new ViewModel(getTree());
  
  // Bind.
  ko.applyBindings(vm, document.getElementById("bindSection"));
  </code></pre>
  
  <p>This works, but I don't think I'm using Knockout much. That's because my click events are in my javascript, and my Knockout view model doesn't really have any control.</p>
  
  <p>How can I allow Knockout to 'see' the click events. So, onclick of a node, a knockout computed (I think?) fires and I can then control the UI based on bind events. </p>
  
  <p>Outside of this, I have a DIV which shows a list of files. What I was was that when a folder level node gets selected, I can populate that div with all the 'text' values from the children of that selected folder node.</p>
  
  <p>Any pointers in how I can achieve this would be amazing. I'm just not sure how I can get <code>data-bind="click...</code> to the nodes, which can then run the code that's currently in the 'onclick' in my fiddle.</p>