Пример заклепок и позвоночника

Question

Я работаю над приложением Spine, которое пользователи клепают js вместо шаблонного движка, и до сих пор я в восторге от привязок заклепок, мои взгляды более лаконичны и читабельны, и у меня есть четкое разделение проблем: мои контролеры заботятся только о управляя состоянием приложения, мои модели выполняют постоянную работу, а мои собственные привязки заклепок и средства форматирования заботятся о форматировании значений и массировании пользовательского ввода. Все идет нормально.

Единственное, что меня беспокоит, так это то, что я использую watch.js, и я подозреваю, что часы отвечают за проблемы с производительностью iphone, и мне это не слишком удобно.

На сайте заклепок JS говорится, что он поддерживает Spine, хотя я не смог найти ни одного примера, не говоря уже о фрагменте.

Единственный адаптер, который работает как для контроллеров, так и для моделей, которые я мог придумать, это:

rivets.configure adapter:
  subscribe: (obj, keypath, callback) ->
    watch obj, keypath, callback

  unsubscribe: (obj, keypath, callback) ->
    unwatch obj, keypath, callback

  read: (obj, keypath) ->
    obj[keypath]

  publish: (obj, keypath, value) ->
    obj[keypath] = value

Есть ли лучший способ связать заклепки с моделями позвоночника и контроллерами?

Я боролся с Object.defineProperty безрезультатно.

Answer 1

Spine.js не генерирует события, когда вы изменяете атрибуты модели, он только генерирует событие, когда вы вызываете save() на модели. Он также не выполняет никакого грязного отслеживания, поэтому вы не получите update:keypath события стиля из коробки, он просто запускает один update событие.

Вот стандартный адаптер для использования моделей Spine.js с Rivets.js.

rivets.configure
  adapter:
    subscribe: (obj, keypath, callback) ->
      obj.bind "update", callback

    unsubscribe: (obj, keypath, callback) ->
      obj.unbind "update", callback

    read: (obj, keypath) ->
      obj[keypath]

    publish: (obj, keypath, value) ->
      obj[keypath] = value

Используя вышеуказанный адаптер, Rivets.js будет обновлять атрибуты в памяти на ваших моделях при переходе от представления к модели (используя двустороннее связующее, такое как value или же checked) и обновит представление (переход от модели к представлению) только при вызове save() на модели. Это только часть того, как работают события Spine.js.

К сожалению, вышеприведенный адаптер обновит каждую привязку для этой модели, включая привязки для свойств, которые не изменились. В качестве альтернативы вы можете использовать что-то вроде https://github.com/mitchlloyd/Spine-Attribute-Events, которое выполняет базовое грязное отслеживание и запускает дополнительное update:keypath событие стиля для атрибутов, которые изменились. Это будет гораздо более эффективным с точки зрения операций DOM, поскольку мы обновляем только то, что необходимо обновить.

rivets.configure
  adapter:
    subscribe: (obj, keypath, callback) ->
      obj.bind "update:" + keypath, callback

    unsubscribe: (obj, keypath, callback) ->
      obj.unbind "update:" + keypath, callback

    read: (obj, keypath) ->
      obj[keypath]

    publish: (obj, keypath, value) ->
      obj[keypath] = value

Как видите, это дает Rivets.js более детальный способ подписки на отдельные изменения атрибутов. Основная идея здесь заключается в том, что Rivets.js теперь будет обновлять только части DOM для атрибутов, которые изменились.

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

Answer 2

Я не эксперт, но это, кажется, правильный файл конфигурации адаптера для Watch.js.

Но это не может быть вашей проблемой производительности. Попробуйте эту ссылку для получения дополнительных подсказок по производительности: Как связать глубже, чем один уровень с rivets.js