flexbox work

Trying to figure out how to get the element being bound

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

  <div id='container'>
    <h1>
  This header
  </h1>
    <div class='container'>
      <div class="containerGrow" data-template='tmpl' data-bind='source:panels'>

      </div>
    </div>
    <h1>
  This footer
  </h1>
    <button data-bind='click:clickOne'>
      1
    </button>
    <button data-bind='click:clickTwo'>
      2
    </button>
    <button data-bind='click:clickThree'>
      3
    </button>
    <button data-bind='click:clickFour'>
      4
    </button>
  </div>



<script type="text/kendo-template" id='tmpl'>
  <div class='panel hideRight' data-bind='style:{transform:transform}'>
    #for(var i=0;i
    <=index;i++){# #=index#<br/> #}#
  </div>
</script>

CSS

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 300px;
  background: red;
  display: flex;
  flex-direction: column;
}

.containerGrow {
  position: relative;
  background: blue;
  display: flex;
  flex-shrink: 0;
}

.panel {
  background: yellow;
  width: 100%;
  flex-shrink: 0;
  transform: none;
  transition: transform .233s cubic-bezier(0, 0, .21, 1);
  will-change: transform;
}

.panel.hideLeft {
  left: calc(-100%);
}

JavaScript

var container = document.querySelector('#container');

var vm = new kendo.observable({
  panels: [{
    index: 0,
    transform: ""
  }, {
    index: 1,
    transform: ""
  }, {
    index: 2,
    transform: ""
  }, {
    index: 3,
    transform: ""
  }],
  clickOne: function(e) {
    debugger;
    vm.panels[0].set('transform', 'translateX(-' + e.target.parentNode.clientWidth + 'px)');
  },
  clickTwo: function() {

  },
  clickThree: function() {

  },
  clickFour: function() {

  }
});

kendo.bind(container, vm);