JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.10.last.min.js"></script>

JavaScript

var item = {
    position : 66,
    center : [59.7235, 28.4731],
    name : 	"Автомобильная дорога к Карбамидному заводу",
    projectref: "projects/263/?clear_cache=Y",
    pictureprojectref : "images/objects/Карбамидный_завод.300x180.jpg",
    popupText: "counter={{50 | counter}}, текст1 {{name}} ещё текст {{projectref}}. Картинка {{pictureprojectref}}, counter={{5 | counter}}"
};

// Асинхронный фильтр
alight.filters.counter = function(args, scope, env) {
    var value = 0;
    
    setInterval(function() {
        env.setValue(value++);
        scope.$scan();
    }, 1000);
    
    return {
        onChange: function(input) {
            value = input;
            env.setValue(value);
        }
    }
};

var scope = alight.Scope({prototype: item});

scope.$watchText(item.popupText,  function(result) {
    document.body.innerText = result;  // Вывод в DOM
}, {init: true});