JSFiddle - React, Tailwind, and code Playground

by rdvornov

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/basis.js/1.3.1/basis.js"></script>

JavaScript

basis.require('basis.net.service');
basis.require('basis.entity');
basis.require('basis.ui');
 
var service = new basis.net.service.Service({
	transportClass: {
		requestHeaders: {
			Accept: 'application/json'
		},
		requestClass: {
			getResponseData: function() {
				return basis.json.parse(this.xhr.responseText);
			}
		}
	}
});
 
var Entity = basis.entity.createType('EntityTest', {
	id: basis.entity.IntId,
	title: String,
	description: String
});
 
Entity.extendClass({
	syncAction: service.createAction({
        method: 'POST',
        url: '/echo/json/',
        request: function(){
          return {
            params: {
                json: 
                ['',
                 '{"id":1,"title":"111","description":"descr1"}',
                 '{"id":2,"title":"222","description":"descr2"}'
                ][this.getId()]

            }
          };
        },
		success: function(data) {
			this.update(data);
		}
	})
});
 
Entity.all.setSyncAction(service.createAction({
    method: 'POST',
    url: '/echo/json/',
    request: function(){
      return {
        params: {
            json: '[{"id":1,"title":"111","description":"descr1"}, {"id":2,"title":"222","description":"descr2"}]'
        }
      };
    },
	success: function(data) {
		this.sync(data);
	}
}));
 
var info = new basis.ui.Node({
	active: true,
	delegate: Entity(1),
	container: document.body,
	template: '<section><article><header><h1>{title}</h1></header><p>{description}</p></article></section>',
    binding: {
			id: 'data:',
			sys_name: 'data:',
			description: 'data:',
			title: 'data:'
    }
});
 
var list = new basis.ui.Node({
	active: true,
	dataSource: Entity.all,
	container: document.body,
	template: '<section/>',
    selection: true,
	childClass: {
        template: '<article id="{id}" event-click="select">[selected: {selected}]<header>{title}</header><p>{description}</p></article>',
		binding: {
			id: 'data:',
			sys_name: 'data:',
			description: 'data:',
			title:...