TLX — небольшая (свернутая и сжатая с помощью gzip) мультипарадигмальная интерфейсная библиотека теперь поддерживает прямое HTML-шаблонирование с двусторонней привязкой данных. Так что это значит? Никакого сложного установочного кода, никакого JSX, только старый добрый HTML со стандартным литеральным обозначением шаблона JavaScript. Это не может быть намного проще, чем это:
<div id="message">Hello ${firstName}</div>
First Name: <input id="name" name="firstName" value="${firstName}">
<script src="https://unpkg.com/tlx/browser/tlx.js"></script>
<script>
// create an empty reactive model to share
const model = tlx.reactor();
// bind message area to model
tlx.view(document.getElementById("message"),{model});
// bind input field to firstName based on name attribute above tlx.view(document.getElementById("name"),{model,linkModel:true})
</script>
Отображается как:
Hello First Name: [___________]
Каждый раз, когда значение в элементе ввода firstName изменяется, блок сообщения будет обновляться.
Hello Joe First Name: [Joe__________]
Начальные HTML-элементы на странице — это собственные шаблоны! Они могут быть настолько широкими по объему, например. корневой элемент со многими дочерними элементами или как узкий, например. один элемент, как вы хотите. Библиотека TLX будет отслеживать все ссылки и автоматически обновлять только те части или DOM, которые изменяются в зависимости от данных, на которые они ссылаются.
Вы можете попробовать это на JSFiddle.
Конечно, несмотря на свои небольшие размеры, это еще не все, что может делать TLX. Он также поддерживает альтернативные источники шаблонов и ручное обновление состояния или рендеринга с использованием отдельных вызовов tolinkModel, что похоже на linkState в Preact. И у него есть обратные вызовы жизненного цикла, такие как beforeUpdate и updated Vue, а также состояние watchers. Компоненты? Без проблем! Повторно используйте стандартные пользовательские элементы или создавайте их автоматически из шаблонов… теневой DOM и все такое. Хочу больше? Вы также можете связать пользовательские контроллеры или базовый маршрутизатор с любым представлением. И он поддерживает рендеринг на основе сервера.
Посетите https://github.com/anywhatway/tlx для более подробной информации и попробуйте TLX!
