Статьи

Крошечная двусторонняя привязка данных

Ноябрь 17, 2017

Привязка данных к DOM — это всего лишь одна из тех вещей, которые чертовски удобны, когда они у вас есть, и очень трудоемки, когда у вас их нет. Проблема заключается в том, что обычно это обходится дорогое основание (здоровенное может применяться к размеру в байтах, но чаще: кривая обучения использовать упомянутые рамки).

Поэтому, как любой хороший изобретатель колес, я написал свою собственную библиотеку двустороннего связывания данных, частично для экспериментов, частично для решения существующих потребностей в моих собственных проектах — с весом менее 2K.

Я представляю (умно названный): bind.js

Демо время

[Здесь] — интерактивная демонстрация привязки в действии. Когда вы измените состояние формы, вы увидите обновление объекта справа ( JSON.stringifyвывод).

Пример использования

Концепция API довольно проста: взять объект, привязать его к функциям и / селекторам с учетом конкретного отображения.

Например , чтобы привязать счет и имя игрока к DOM:

var user = Bind({
  name: '[new user]',
  game: { score: 0 }
}, {
  'game.score': 'span.score',
  name: 'input[name="username"]'
})

// in the game
user.game.score += 25;

… и обновления HTML позаботятся о себе. Затем пользователь вводит свое имя в поле ввода, он обновляет userобъект.

Значение сопоставления также является гибким и может быть:

  • Строка, представляющая селектор
  • Функция, которая получает новое значение
  • Объект , который поддерживает любого из следующих свойств: dom, callbackиtransform

Используя объект в качестве значения отображения, он позволяет вам выполнить преобразование ваших данных до того, как они попадут в DOM. Это, очевидно, полезно для таких вещей, как обновление элементов списка :

var data = Bind({
  cats: ['nap', 'sam', 'prince']
}, {
  cats: {
    dom: '#cats',
    transform: function (value) {
      return '<li>I had a cat called <em>' + this.safe(value) + '</em></li>';
    }
  },
  'cats.0': {
    dom: '#first-cat',
    transform: function (value) {
      return 'My first cat was ' + this.safe(value);
    }
  }
});

Внутри transformфункции также есть помощник, this.safe()который спасет ваш контент в безопасности для HTML.

Object.observe?

Нет. Я не использую его, поэтому также есть некоторые ограничения (удаление свойства является основным / единственным).

Почему бы и нет? Главным образом для большей платформы поддержки. Эта библиотека поддерживает IE9 вверх (и, следовательно, все другие браузеры) и включает в себя обнаружение функций.

Я также попробовал Object.observeполифилл в начале, но не имел большого успеха (хотя я не помню, какие были проблемы). Мне также нравится вызов кода ?

HTML декораторы?

Нет (снова). Недавно я отлаживал некоторый код Knockout и столкнулся с трудностями, когда понял, что фактическое связывание происходит в HTML, а манипулирование происходит в отдельном файле JavaScript.

Так что нет data-*, намеренно нет поддержки. Весь код живет в одном месте: в JavaScript.

Мне лично нравится, что моя привязка данных находится в одном месте. Если вы не очень заинтересованы, всегда есть Angular, Knockout и тому подобное.

Приятно иметь

Я начал открывать несколько вопросов о вещах, которые я хотел бы, но в настоящее время они включают в себя:

  • Поддержка отображения корневых объектов (т. Е. Чтобы иметь возможность перехватить обратный вызов при любых изменениях)
  • Поддержка Glob, т.е. me.*.nameвызовет обратные вызовы, соответствующие любому пути, начиная с meи заканчиваяname
  • Тест, чтобы проверить каждый отдельный элемент формы (в настоящее время это немного путаница)

Не стесняйтесь поднять вопрос или запрос на добавление функции или дайте мне знать, если вы будете использовать это даже!

33
Share: