JSFiddle - React, Tailwind, and code Playground

by Christian Meixner

HTML

<script src="//unpkg.com/[email protected]"></script>
<div id="demo"></div>
<script id="tmpl" type="text/template">
<button on-click="@this.moveItem()">Move a10 before a4</button>
{{#.pages}}
<div class="item page" id="{{.id}}">Page: {{.id}}
  {{#.sections}}
  <div class="item section" id="{{.id}}">Section: {{.id}}
    {{#.articles}}
    <div class="item article" id="{{.id}}">Article: {{.id}}
    {{#.articles}}
    <div class="item article" id="{{.id}}">Article: {{.id}}</div>
    {{/articles}}
    </div>
    {{/articles}}
  </div>
  {{/sections}}
</div>
{{/pages}}
</script>

CSS

body {font-family:helvetica; font-size:12px}
.item {border: 1px solid #ccc; background:#eee; padding:10px; margin:5px;}
.page {background:#fdd;}
.section {background:#ffd;}
.article {background:#dfd;}
.article .article {background:#cfc;}

JavaScript

Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);
var app = new Ractive({
  el: '#demo',
  template: '#tmpl',
  moveItem: moveItem,
  data: {
    pages:[{
    	id: 'p1',
	    sections: [{
      	id:'s2',
        articles: [{
        	id:'a4'
        },{
        	id:'a5', 
          articles: [{id:'a10'}, {id:'a11'}, {id:'a12'}]
        },{
        	id:'a6'
        }]
      }]
    }]
  }
});

function moveItem() {
	var articleToMove = app.get('pages.0.sections.0.articles.1.articles.0');
	
  app.splice('pages.0.sections.0.articles.1.articles', 0, 1);
	app.splice('pages.0.sections.0.articles.', 0, 0, articleToMove);
  
  var nodeInfo = app.getNodeInfo(document.getElementById('a11'));
  var keypath = nodeInfo.resolve();
  var EXPECTED_KEYPATH = 'pages.0.sections.0.articles.2.articles.0';

	console.log(keypath, keypath === EXPECTED_KEYPATH);
}