Leksat Nov 21 2012 at 16:26

Dart: веб-компоненты в действии

3 min

12K

Веб-компоненты — новый веб стандарт, разрабатываемый Google. Некоторые считают, что он должен стать трендом в ближайшее время. И я, попробовав его в деле, пожалуй соглашусь с таким мнением.
Подробное описание стандарта: habrahabr.ru/post/152001

Разработчики дарта не стали ждать и начали реализовывать поддержку веб-компонентов уже сейчас. После того как я об этом узнал, мой интерес к дарту усилился в двойне. Изучив статью с примерами, мне показалось что с веб-компонентами можно творить чудеса:

количество кода уменьшается,
из кода убираются DOM-манипуляции,
в коде остается только логика.

Отмечу, что пока речь идет не о нативной поддержке веб-компонентов как веб-стандарта, но об их реализации средствами дарта. Возможно эта реализация будет своеобразным фоллбэком для старых браузеров.

Этот пост не удивит тех кто знаком с knockout.js. Это почти тоже самое, но на родном JS.

Реальный опыт

Решил опробовать. У меня как раз был мини-проект: тайм трекер. Я написал его исключительно для себя с целью познакомиться с дартом поближе. (Знакомство, кстати, прошло «так себе». На то время и сам дарт и его редактор были очень сырыми.)

Код: github.com/Leksat/time_tracker
Live версия: leksat.me/sites/default/files/time_tracker/web/out/_main.html.html

В качестве стартовой точки программы служит глобальный объект timeTracker. Главные его обязанности: загрузка и сохранение задач в localStorage. Свойство tasks содержит список задач, объектов типа Task.

А вот и код страницы с веб-компонентами.

EDIT: Код уже не актуален.

<div id="main-wrapper" class="{{timeTracker.wrapperClass}}">
  <div id="time-tracker">
    <div id="tools">
      <button data-action="click:timeTracker.createNewTask">New Task</button>
      <button data-action="click:timeTracker.deleteAllTasks">Clear all</button>
    </div>
    <div id="tasks">
      <template iterate='task in timeTracker.tasks'>
        <div class="task">
          <input class="name" type="text" data-bind="value:task.name" />
          <input class="time" type="text" data-bind="value:task.time" disabled="{{task.working}}" />
          <button data-action="click:task.toggleState">{{task.toggleStateLabel}}</button>
          <button data-action="click:task.delete">Delete</button>
        </div>
      </template>
    </div>
  </div>
</div>

На первый взгляд выглядит как обычный шаблон. Но только на первый.

data-action="click:timeTracker.createNewTask" навешивает onclick обработчик.
data-bind="value:task.name" связывает связывает свойство name объекта task со значением свойства value элемента input. Самое приятное, что делается это двунаправленно. При изменении значения пользователем в браузере, свойство объекта в программе будет изменено, и так же наоборот, если свойство объекта изменится в программе, значение элемента input обновится автоматически. Стоит заметить, что привязка происходит к конктеному экземпляру объекта. То же самое справелливо и для коллбэков.
свяжет каждый элемент типа Task в списке со своим шаблоном. И будет следить за изменениями в timeTracker.tasks удаляя или добавляя новые элементы "на лету". Никаких больше лишних обработчиков событий. Все делается само.

Tags:

Hubs: