Пишем код

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

Archive for Июль, 2016

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"></button><br />
  </template><br />
</dom><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 />

Read the rest of this entry »

Written by Shaddix

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

Posted in javascript,web