Что, если создать реактивный интерфейс с возможностью поиска, который связывает адреса электронной почты с именами, было бы так просто?

<!DOCTYPE html>
<html>
<body>
<div id="app">
<p>
Search By Email: <input onchange="search(this.value)">
</p>
<p>
Email:<input value="${email}" disabled="${email.length>0}" onchange="linkState('email','#app')(event)"><br>
First Name:<input value="${name.first}" onchange="linkState('name.first','#app')(event)"><br>
Last Name: <input value="${name.last}" onchange="linkState('name.last','#app')(event)">
</p>
<p t-if="${email.length>0}">
<button onclick="save()">Save</button>
<button onclick="remove()">Delete</button>
</p>
</div>
</body>

Это может быть с TLX v2, менее самоуверенной, многопарадигмальной интерфейсной библиотекой. Хотя Tlx имеет многие функции Vue, React, Riot и Hyperapp; в этой статье мы просто развлечем ваш аппетит на простую мощь литералов HTML-шаблонов и tlx.linkState в сочетании с localStorage.

Что такое литералы шаблонов HTML?

Литералы HTML-шаблонов похожи на шаблоны усов, {{ }}, популяризированные Handlebars и Ractive. За исключением того, что они не поддерживают условное ветвление в HTML, их можно использовать практически везде, где можно использовать усы. Они вызывают оценку встроенных выражений JavaScript и особенно полезны для замены значений данных времени выполнения в HTML.

Как и Ractive, при обработке литералов шаблона HTML также исчезают логические атрибуты HTML, если для них установлено значение false. См. Пример в приведенном выше коде disabled="${email.length>0}.

Как и Vue, Tlx поддерживает директивы атрибутов. Директивы t-if, t-for, t-foreach и t-on встроены. Но вы можете добавить их всего в одну-две строчки кода. См. Пример использования в приведенном выше коде <p t-if="${email.length>0}">.

Именно здесь Tlx изначально получил свое название - Template Literal Extensions. Хотя Tlx v2 намного мощнее, мы не видели смысла в изменении названия, так как большинство людей все равно не понимают, что означает Tlx.

Что такое linkState?

Концепция linkState заимствована из Preact и представляет собой просто способ привязать данные из формы к состоянию модели, связанному с целевым элементом HTML. Требуется ключевой путь для обновления и целевой элемент для обновления модели. Если при первом обновлении модели не существует, она создается.

Немного JavaScript

После закрывающего тега body требуется совсем немного кода JavaScript, чтобы поля, определенные выше, выполняли свою работу. Нам нужно загрузить tlx.js, получить связанную модель и добавить функцию поиска, функцию сохранения и функцию удаления.

<script src="../dist/tlx.js"></script>
<script>
const model = tlx.bind(),
  search = key => {
    let object,
      i = 0;
    while(!object && i<localStorage.length) {
    // look through all the keys until one matches  
      if(localStorage.key(i)===key) {
        object = JSON.parse(localStorage.getItem(key));
      }
      i++;
    }
    if(object) {
      // assign values from object to the model
      Object.assign(model,object)
    } else {
      // "undefine" the properties on the model
      // Tlx actually has three approaches to removing data
      // model. This is just one used when no bind start-up
      // options are provided.
      Object.keys(model).forEach(key => {
        if(typeof(model[key])!=="function") {
           model[key] = undefined;
        }})
    }
},
remove = () => {
  if(model.email) { 
    localStorage.removeItem(model.email);
    // search for nothing, which will blank out the model
    search(); 
  }
},
save = () => { 
  if(model.email) {    
    localStorage.setItem(model.email,JSON.stringify(model)); 
  }
};
</script>

Есть рабочий пример на JSFiddle.net.

Почему это так просто?

Поскольку Tlx начинался как замена JSX, ориентированная на HTML, часто приходилось отрисовывать целые страницы. Итак, был определен набор полезных настроек по умолчанию:

  1. Модель по умолчанию - это просто пустой объект.
  2. Элемент HTML по умолчанию, в котором отображается содержимое, является первым дочерним элементом document.body.
  3. Шаблон по умолчанию - это исходное содержимое элемента HTML по умолчанию.
  4. Поведение по умолчанию, когда linkState вызывается после вызова tlx.bind без аргументов, должно быть реактивным и автоматически повторно отображать затронутые компоненты страницы.

Подробнее о Tlx

Как было сказано выше, Tlx значительно изменился со времени выпуска v1, и теперь существует множество вариантов для создания приложений, компонентов и настраиваемых HTML-тегов. Ниже приведены лишь некоторые из множества доступных вариантов:

1) Односторонняя или двусторонняя привязка данных

2) Неизменяемое состояние или изменяемое состояние в контроллерах / действиях

3) Отдельная модель и объекты контроллера / действия или отдельные объекты, обеспечивающие как модель, так и контроллер.

4) POJO или экземпляры классов в иерархиях произвольной глубины в качестве моделей и контроллеров / действий

5) создание vDOM с функцией `h`, создание vDOM строкового шаблона или создание vDOM HTML-шаблона

6) Параметры псевдосовместимости, которые могут сделать его знакомым разработчикам, привыкшим к другим библиотекам, или разрешить чрезмерные архитектурные проблемы, например Сокращение @handler, такое как Vue, кластеризация стилей и функционального кода, а также шаблоны Riot, аналогичные имена функций (tlx.directive против Vue.directive или tlx.linkState против preact.linkState).

Если вам нравится простота Tlx, дайте нам аплодисменты!

Приглашаем вас посетить сайт Github для получения полной информации или проследить за последующими статьями, чтобы исследовать мощность и простоту Tlx.

✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .