Пишем код

Заметки о .net разработке

Polymer и NotifyPropertyChanged в JavaScript

3 комментария

Есть замечательный фреймворк построения веб-приложений — Polymer. Это даже скорее не фреймворк, а реализация идеологии WebComponents в современных реалиях веб-браузеров.

Если кратко, то с его помощью можно реализовывать полноценный, удобный и быстрый (как с точки зрения производительности решения, так и скорости разработки) MVVM в JavaScript:

<br />
<dom-module id="my-component"><br />
  <template></p>
<h4>ToDo list for {{name}}:</h4>
<ul>
      <template is="dom-repeat" items="{{model.todoitems}}"></p>
<li>{{item.title}}</li>
<p>      </template>
    </ul>
<p>    <button title="ChangeName" on-tap="ChangeName"/><br />
  </template><br />
</dom-module><br />
<script>
Polymer({
  is: 'my-component',
  name: 'Artur',
  model: {
    items: [
      {title: '1'}
    ]
  },
  ChangeName: function() {
    this.model.name = this.name + "_1";
  },
});
</script><br />

В WPF мы привыкли, что интерфейс перерисовывается автоматически, при изменении значения свойства: this.name = ‘New Name’;. Однако у многих js-mvvm-фреймворков, присвоения приходится производить с помощью магических функций: this.set(‘name’, this.name + «_1»). В Polymer успешно работает первый (удобный :)) вариант, однако при работе с массивами и вложенными объектами эти прелести заканчиваются. Код добавления новых элементов в список ToDo выглядит примерно так:
<br />
Add: function() {<br />
  this.push('items', {title: 'another item'});<br />
}<br />

Редактирование же элементов в списке (например, изменение title) будет еще более ужасным:
<br />
  this.set('items.1.title', 'new title!');<br />


Конечно от этого хочется избавится (и не только мне :)). Для этого и был создан компонент dom-bind-notifier. К сожалению, с актуальными версиями Polymer у него проблемы, и для этого его пришлось немного пропатчить, результат доступен у меня на github (также можно установить через bower install dom-bind-notifier-polymerpatch). Использование в сценарии выше крайне просто: добавляем тег
<br />
    <button title="ChangeName" on-tap="ChangeName"/><br />
    <dom-bind-notifier observed-object="{{model}}" path="model" deep></dom-bind-notifier><br />
  </template><br />

После этого старые-добрые присвоения отлично работают:
<br />
Add: function() {<br />
  this.model.items.push({title: 'another item'});<br />
},<br />
Change: function() {<br />
  this.model.items[1].title = 'another item';<br />
}<br />

Функционирует подписываясь на браузерный Object.Observe.
Полный пример использования — по ссылке. Не стесняйтесь сделать View Source :)

Успешного использования!

Опубликовать в Facebook
Опубликовать в Google Plus

Written by Shaddix

Июль 4th, 2016 at 7:14 дп

Posted in javascript,web

3 комментария to 'Polymer и NotifyPropertyChanged в JavaScript'

Subscribe to comments with RSS or TrackBack to 'Polymer и NotifyPropertyChanged в JavaScript'.

  1. Так ведь от Object.observe в blink решено избавиться, в edge добавлять тоже не планируют. http://caniuse.com/#search=Object.observe

    Игорь

    4 Сен 16 at 14:55

  2. Согласен. Собственно, здесь и написано об использовании полифиллов на данный момент.

    В будущем подобное можно будет реализовать через Proxy, который вроде бы приняли.

    Shaddix

    10 Сен 16 at 14:51

  3. Polymer — это всего лишь небольшая обёртка над стандартными веб-компонентами. С чего её будут забрасывать? Скорее уж Ангуляр потихоньку будет терять популярность ввиду перехода всё большего количества разработчиков на нативную реализацию того же функционала, что предоставляет Ангуляр — точно так же, как её продолжает понемногу терять jQuery.

    Andrey GolubJacy

    8 Июн 18 at 21:26

Leave a Reply