?

Log in

No account? Create an account
November 2016   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
cartoon

NestedReact 1.0 beta. Hierarchical Checklist Demo.

Posted on 2016.08.08 at 21:50

Comments:


Gaperton
gaperton at 2016-08-10 22:11 (UTC) (Link)
Ну и спасибо, конечно. Отличный пример.
ЛёШа Фу!
kvasdopil at 2016-08-11 06:00 (UTC) (Link)
Вам тоже спасибо, идея линков меня заинтересовала. Задницей чую что их можно получить в mobx из коробки. Напишу если найду.
ЛёШа Фу!
kvasdopil at 2016-08-11 08:44 (UTC) (Link)
В общем от mobx функциональности линков добиться не получилось. Они там внутри используются (ака BoxedValue), но их проблематично достать из рендера.
В принципе, всё легко решается наколхоживанием линков руками (см https://github.com/kvasdopil/checklistTree/blob/master/src/link.js) и валидаторы туда засунуть не проблема. Правда есть сомнения, что оно будет прям настолько уж удобно.

Оно будет несколько удобнее, если формы описывать живыми реактовскими компонентами. Просто мы вместо этого пишем что то типа

popupForm({
 title: "Edit User",
 data: this.object,
 fields: [{
  name: 'name',
  validator: validators.UserName,
 },{
  name: 'icon',
  type: IconSelect
 }]
})

и, раз у нас на каждую форму всё равно магический враппер накручен, то и смысл в ништяках типа линков пропадает.

А как у вас валидация сделана? Мож я не понимаю чего-то?
Gaperton
gaperton at 2016-09-06 02:24 (UTC) (Link)
Все просто. Во-первых, реализация линков вынесена в отдельный пакет.

https://github.com/Volicon/NestedLink

Там кода совсем немного, и он простой. Его можно почитать.

Во-вторых, эти линки легко прикручиваются к любому источнику данных. Сделать привязку к mobx - это немного поправить метод Link.state. Надо сделать линк, который вместо setState при записи тупо пишет в проперти объекта. И все.

Еще надо поправить Link.all(). По хорошему - эта пара поправленных методов выносится в базовый класс, рядом с которым кладется новый подкласс линков.

Вот так это делается для NestedReact: https://github.com/Volicon/NestedReact/blob/develop/src/nested-link.js
Gaperton
gaperton at 2016-09-06 02:28 (UTC) (Link)
Могу добавить, что эти линки из NestedLink мало того, что дохрена могут (что, впрочем, в случае mobx по большей части не нужно, но валидацию на коленке, например, могут), но лишены их традиционных недостатков о которы пишут в сети. Например, они умеют кэшируются в компоненте. Что не ломает pure render.

Последнее, впрочем, тоже в случае mobx не особенно нужно, наверное. Там локальный render ведь всегда, вроде. ХЗ, как это с линками будет дружить при их передаче в другие компоненты.
Gaperton
gaperton at 2016-09-06 02:35 (UTC) (Link)
Валидация сделана так. http://slides.com/vladbalin/deck#/

Каждый класс модели и коллекции умеет валидировать себя, и метод model.getLink( 'attr' ) протаскивает validation error модели как еще один проперти линка.

Принцип, как линки используются для валидации, объяснен здесь: https://medium.com/@gaperton/react-forms-with-value-links-part-2-validation-9d1ba78f8e49#.78tgyjp5m

Этот трюк - это по настоящему круто, кстати. Позволило сократить код форм в нашем продукте примерно в половину. ИМХО - это главнейший аргумент в пользу линков. То, что они позволяют писать минус пропс - это ерунда в сравнении с валидацией.

Edited at 2016-09-06 02:37 am (UTC)
Previous Entry  Next Entry