Ember Data Mockjax

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script src="http://ember.alexspeller.com/handlebars-1.0.0.js"></script>
<script src="http://ember.alexspeller.com/ember-latest.js"></script>
<script src="http://ember.alexspeller.com/ember-data-latest.js"></script>
<script type="text/x-handlebars">
{{#split-view}}
    {{#left-view}}
        {{_view.parentView}}
         left
    {{/left-view}}
    {{#right-view}}
        {{#split-view}}
              {{#top-view}}
                top
              {{/top-view}}
              {{#bottom-view}}
                  bottom
              {{/bottom-view}}
        {{/split-view}}
    {{/right-view}}
{{/split-view}}
</script>

<script type="text/x-handlebars" data-template-name="components/split-view">
  {{yield}}
</script>

<script type="text/x-handlebars" data-template-name="components/left-view">
  {{yield}}
</script>

<script type="text/x-handlebars" data-template-name="components/right-view">
  <div class="sash"></div>
  {{yield}}
</script>


<script type="text/x-handlebars" data-template-name="components/top-view">
  {{yield}}
</script>

<script type="text/x-handlebars" data-template-name="components/bottom-view">
  <div class="sash"></div>
  {{yield}}
</script>

SCSS

.split-view {
    border: 1px solid black;
    height: 200px;
    position: relative;
}

.left-view, .right-view {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid black;
}

.top-view, .bottom-view {
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid black;
}
.left-view {
    left: 0;
}
.right-view {
    right: 0;
    &>.sash {
        background-color: red;
        cursor: move;
        position: absolute;
        left: -11px;
        top: 0;
        bottom: 0;
        width: 10px;
    }
}

.top-view {
    top: 0;
}
.bottom-view {
    bottom: 0;
    &>.sash {
        background-color: red;
        cursor: move;
        position: absolute;
        top: -11px;
        left: 0;
        right: 0;
        height: 10px;
    }
}

CoffeeScript

window.App = Em.Application.create()

App.SplitViewComponent = Em.Component.extend
  classNames: ["split-view"]
  percentage: 50
  isDragging: false
  mouseUp: ->
    @set 'isDragging', false
  isHorizontal: (->
      App.LeftViewComponent.detectInstance @get('childViews.firstObject')
  ).property()
    
  mouseMove: (event) ->
    return unless @get 'isDragging'
    if @get 'isHorizontal'
        posInParent = event.pageX - @$().offset().left
        @set 'percentage', (posInParent / @$().width()) * 100
    else
        posInParent = event.pageY - @$().offset().top
        @set 'percentage', (posInParent / @$().height()) * 100
        

  mouseDown: (event) ->
    tag = event.target
    if tag.className is 'sash'
      if @get('element') is tag.parentElement.parentElement
          @set 'isDragging', true
          event.preventDefault()
   
    
App.LeftViewComponent = Em.Component.extend
  classNames: ["left-view"]
  percentage: Em.computed.alias 'parentView.percentage'
  attributeBindings: ["style"]
  style: (->
    "right: #{100 - @get 'percentage'}%;"
  ).property 'percentage'

App.RightViewComponent = Em.Component.extend
  classNames: ["right-view"]
  percentage: Em.computed.alias 'parentView.percentage'
  attributeBindings: ["style"]
  style: (->
    "left: #{@get 'percentage'}%;"
  ).property 'percentage'

    
 App.TopViewComponent = Em.Component.extend
  classNames: ["top-view"]
  percentage: Em.computed.alias 'parentView.percentage'
  attributeBindings: ["style"]
  style: (->
    "bottom: #{100 - @get 'percentage'}%;"
  ).property 'percentage'

App.BottomViewComponent = Em.Component.extend
  classNames: ["bottom-view"]
  percentage: Em.computed.alias 'parentView.percentage'
  attributeBindings: ["style"]
  style: (->
    "top: #{@get 'percentage'}%;"
  ).property 'percentage'