-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Directive #1
Comments
Склонируй репозиторий еще раз отдельно, и изучи код в мастере (поскольку в dir другая версия Ангуляра, может начаться ад в зависимостях).Ты увидишь рабочую версия компонента. Входная точка (после app.module, конечно) – app.component.ts. Это произвольное приложение. На нем объявлен объект datasource, а в шаблоне значится ui-scroll, которому datasource передается в качестве входного параметра. ng-template размечает шаблон, который будет повторяться скроллером. let-myItem="item" и let-index="index" задают параметры, которые можно использовать в этом шаблоне. Все. Это то, как видит компонент конечный пользователь (программист). То, что лежит в папке ui-scroll никто никогда не увидит. Программист задает datasource и шаблон отображения. Всю остальную работу делает скроллер. Но мы не хотим, чтобы скроллер был компонентом. Мы хотим, чтобы он был директивой. Чтобы конечный программист писал бы в шаблоне своего приложения
Без ng-template (который не работает в директиве). Я научился пропихивать в директиву datasource (этот код в dir), но не подобрался к item... |
@dhilt Да, я переключаюсь между двумя репозиториями с бранчами dir и master. Все еще пока что вникаю в детали. Но что нужно сделать и как все примерно должно выглядеть - это уже точно понял. |
Я готов подключиться, когда появится время, эта задача нетривиальная, я не
сумел ее нахрапом решить. Пока же, как мне видится, можно пробовать решать
ее без учета внутренностей ui-scroll. То есть пусть это будет просто
директива, принимающая datasource (это уже сделано) и выдающая зацикленный
template с доступным на нем item. Этот item должен производиться на свет
через datasource.
App [datasource]
-----------------------------> Directive
^ |
| (item)s |
<------------------------------------
Пусть у datasource будет одно свойство list = [1,2,3,4,5], а item в шаблоне
должен принимать значения list[i], тогда в шаблоне App надо писать item.
Ну или datasource.list = [ { text: 'A' }, { text: 'B' }, {text: 'C'} ], а
item = list[i] = например { text: ... }, тогда в шаблоне App нужно писать
item.text.
2017-12-15 16:47 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Да, я переключаюсь между двумя
репозиториями с бранчами dir и master. Все еще пока что вникаю в детали. Но
что нужно сделать и как все примерно должно выглядеть - это я уже точно
понял.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXGDPFcCCb8K8z6lptzHyNPY1HtN_ks5tAnhbgaJpZM4RDS4B>
.
--
Алексанов Д.И.
|
@dhilt Начал пробовать, вот коммит - 99ed60d. |
@khajjit Вижу твои попытки, пока не знаю, как направить их к победе, как заставить {{item}} в app.component.html работать... |
@khajjit Я понял, как мы можем поступить, Денис. Обнови Ангуляр до последней версии и воспроизведи в UiScroll код нативного NgFor. Если мы хотим синтаксис ngFor, то надо использовать его нативную имплементацию. Когда удастся сделать клон ngFor, можно будет думать, как подпихнуть туда наш datasource с нашей логикой вытаскивания items, а потом изменить логику отображения с простого линейного вывода на то, что у нас в компоненте сейчас (Workflow etc). Но главное – это добиться работы кастомного ngFor. Я бы просто брал исходный код Ангуляр. Еще можно пытаться смотреть статьи вроде http://www.talkinghightech.com/en/create-ngfor-directive/. |
@dhilt Удивительно, но точно об этом же я подумал два дня назад, хорошенько вглядеться в исходный код директивы ngFor и написать что-то похожее, но под условия нашей задачи. В дальнейшем значит буду пробовать этот подход. |
Денис, я в пятницу задал вопрос на stackoverflow, это решает нашу проблему
с начальным подходом –
https://stackoverflow.com/questions/47944677/wrap-angular-ngfor-directive-with-another-structural-directive.
Конечно, я считаю, что было бы более правильно и производительно все же
добиться результата путем клонирования и кастомизации оригинального ngFor,
но тем не менее мы можем двигаться дальше и с начальным подходом. Посмотри,
пожалуйста, и внедри это дело ($implicit). Так же надо отказаться от
отдельного сервиса! вешай datasource прямо на инстанс (как в моем вопросе).
Если у тебя есть подвижки в направлении ngFor, выноси их в отдельный бранч.
2017-12-19 17:38 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Удивительно, но точно об этом же я
подумал два дня назад, хорошенько вглядеться в исходный код директивы ngFor
и написать что-то похожее, но под условия нашей задачи. В дальнейшем значит
буду пробовать этот подход.
А пока что я пытался немного замысловато пропихнуть templateRef. Попытка
была следующей - сохранить этот объект на объявлении директивы, сохранить
через сервис. Далее при объявлении подопечного компонента
ui-scroll.component.ts установить этот объект в качестве переменной
templateVariable. И тег ng-template по-своему заработал, только мне не
удалось добиться подстановки значений для spec_item (ранее item в
app.component.html), показывается только строка "Hello uiScroll Directive."
из app.component.html. Быть может, все же можно было бы добиться удачной
работы с таким подходом, но я похоже не учел одной важной детали - с таким
кодом конечному пользователю не удастся задавать переменные только в
app.component.html, для нормальной работы их нужно дублировать еще и в
ui-scroll.component.html. В общем, тупик пожалуй. Но у вас может появяться
какие-нибудь идеи, вот коммит - f8e3dad
<f8e3dad>
.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXEaban1NdEwVvanRTUXFFY5SYG6sks5tB8pYgaJpZM4RDS4B>
.
--
Алексанов Д.И.
|
@dhilt Подвижек особо не было, но в общем-то я уже начинал копаться вместе с этой таинственной переменной $implicit, по стопам следующей статьи https://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html. И от понимания всего там происходящего я пока что далек. А следуя по вашему сообщению и ответу на stackoverflow все получилось, и сервис убрал. |
Да, так оно и должно выглядеть. Давай теперь попробуем завести
UiScrollComponent, надо раскомментировать инициализацию и запуск Workflow,
заставить работать директиву, чтобы в совокупности был результат такой же,
как в текущем мастере. Это одна большая задача, а вторая обновить Angular и
все его компоненты до самой последней версии. После этого можно будет
мержиться.
Кстати, если у тебя есть аккаунт на stackoverflow, поставь нам (с автором ответа) по upvote.
Если нет, заведи (я логинюсь через github аккаунт) и прокачай, чтобы можно было голосовать. Я начал им
пользоваться активно последние месяцы, иногда действительно помогает, как в
этот раз.
2017-12-24 22:50 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:
… @dhilt <https://github.com/dhilt> Подвижек особо не было, но в общем-то я
уже начинал копаться вместе с этой таинственной переменной $implicit, по
стопам следующей статьи https://teropa.info/blog/2016/
03/06/writing-an-angular-2-template-directive.html. И от понимания всего
там происходящего я пока что далек.
А следуя по вашему сообщению и ответу на stackoverflow все получилось, и
сервис убрал.
Коммит - 8f7cea3
<8f7cea3>
.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXMRY-r1COXqdYDUTthwGNYvPbOsGks5tDqr6gaJpZM4RDS4B>
.
--
Алексанов Д.И.
|
@dhilt Angular уже вроде как обновил до последней версии, вот коммит - 41094e3. Аккаунт на stackoverflow есть, некоторое время назад мы можно сказать вместе вопрос по поводу webpack и jshint отправляли (https://stackoverflow.com/questions/47291494/how-to-jshint-two-different-folders-with-webpack). Только репутацию все еще не поднял, чтобы мои плюсики/минусики засчитывались. |
@dhilt Вернул первоначальный вид - d031a9f. Пришлось только css-стили перенести в папку ui-scroll-directive. И пока что не до конца разобрался с тем, что нужно писать в [ngTemplateOutletContext] - d031a9f#diff-371601649b2a4948697a1b03d67b2b1dR14. |
Хорошо, спасибо! я сегодня-завтра посмотрю и будем решать, что дальше
…On Mon, Dec 25, 2017 at 3:24 AM, Denis Iuvzhenko ***@***.***> wrote:
@dhilt <https://github.com/dhilt> Оказывается angular успел получить
новую версию, обновил - 6bf7c5e
<6bf7c5e>
.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEKdXN1gM8tSXb29umDKxAaBQ1QpQdPZks5tDus4gaJpZM4RDS4B>
.
--
Алексанов Д.И.
|
@khajjit Все отлично работает на данный момент. Сделай пожалуйста мерж в свой мастер и открой PR на мой мастер, я приму его. И сейчас я создам следующую задачу. |
No description provided.
The text was updated successfully, but these errors were encountered: