JSFiddle - React, Tailwind, and code Playground
JavaScript
window.onload = function(){
//описание шаблона
var template = function(data){
//если 'e' не указан, будет сделан div
return {c: 'user', C: [
{e: 'a', h: 'http://facebook.com/' + data.facebookId, c: 'user-avatar-wrapper', C:
{e: 'img', c: 'user-avatar', S: 'http://graph.facebook.com/' + data.facebookId + '/picture?width=200&height=200'}
},
{c: 'user-name', t: data.fristName + ' ' + data.lastName, n: 'userName'},
]};
};
//собираем шаблон. метод tp возвращает нам результат сбоки
var build = cnCt.tp(template, {fristName: 'swf', lastName: 'dev', facebookId: '100005155868851'}, document.body);
//работаем и навешиваем события на найденные элементы
build.r.addEventListener('click', function(){console.log('hello')}); //build.r (r сокращённо от root) это div.user
build.userName.addEventListener('click', function(){console.log(this.textContent)}); // элемент найденный по n: 'userName'
}
//документация https://github.com/SoftWearFinance/cnCt#cnct-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F
//положил сюда т.к. некогда разбирваться с хостером
/**
* @name cnCt
* @version 0.0.3
* @description cnCt — JavaScript client template engine
* @license MIT (license.txt)
* @author Dmitry Makhnev, SoftWearFinance LLC
* © SoftWearFinance LLC (http://softwearfinance.com/), Dmitry Makhnev (https://github.com/DmitryMakhnev)
*/
(function(_window, _document){
var cnCt,
_templatesList,
u,
abstractDIV = _document.createElement('div'),
isArray = Array.isArray !== u ?
function(essenceForTest){
return Array.isArray(essenceForTest);
}:
function(essenceForTest){
return Object.prototype.toString.call(essenceForTest) === '[object Array]';
};
function addToNeedNodes(needNodesName, $DOMNode, needNodes){
var...