...

Использование своих проектов js, написанных в любимом фреймворке

Тема в разделе "Примеры сценариев", создана пользователем anton.alexandrov, 15 сен 2023.

Метки:
  1. anton.alexandrov

    anton.alexandrov Участник

    Всем привет!
    Так получилось, что душа прикипела к Vue.js (у вас это может быть, например, React или Angular или ещё что-то более крутое). Толкал его везде, где только можно было, начиная ещё с монолита третьей версии. И вот с выходом е365 наконец-то появилась возможность использовать проекты без танцев с бубном.
    Я взял за пример мой давний проектик, связывающий vue-dadata-suggestions и vue-yandex-maps. Суть его проста: выбираем адрес из подсказок - ставим маркер на карте, тыкаем на карте точку - пишем в поле контекста адрес. Предварительно создал страницу, на странице - виджет. Добавил контекст для виджета типа Строка и именем свойства address, в проекте в событии при выборе подсказки добавил строчку document.querySelector('input[id="address"]').value = val.unrestricted_value и скомпилировал его как для сайта.
    В конструкторе Виджета загрузил всю структуру скомпилированных папок и файлы в разделе Файлы.
    MjAyMy0wOS0xNV8xOC0zMC01NDE2OTQ3OTE4OTA=.png
    Кинул на форму виджета созданный контекст и виджет Код. Скопировал из скомпилированного файла .html код подключения приложения, вставил в Код:
    HTML:
    <link href='<%= UI.widget.filePath %>/chunk-vendors.dadata.css' rel=stylesheet>
    <link href='<%= UI.widget.filePath %>/app.dadata.css' rel=stylesheet>
    
    <div id='dadataapp'></div>
    
    <script src='<%= UI.widget.filePath %>/chunk-vendors.dadata.js'></script>
    <script src='<%= UI.widget.filePath %>/app.dadata.js'></script>
    добавив путь к файлам виджета <%= UI.widget.filePath %>.
    2023-09-15_17-54-16.png
    Теперь открывается целая бездна для творчества )

    UPD:
    Обернул всё в решение, ссылка для скачивания (не прикрепляется файл .е365).
    2023-09-18_14-43-45.png 2023-09-18_14-43-06.png











    Последнее редактирование: 18 сен 2023
  2. Codain

    Codain Активный участник

    Ну теперь осталось только выгрузить решение на форум или закинуть файлы проекта
  3. anton.alexandrov

    anton.alexandrov Участник

    Обновил пост, ссылка на Я.Диск.
  4. Codain

    Codain Активный участник

    А при уже сохранённых адресах в контекстной переменной карта не отрисовывается на карточках вновь
    Да и в целом в просмотре карта не отображается =)
  5. anton.alexandrov

    anton.alexandrov Участник

    У вас должен быть свой токен для ДаДата и API Яндекс.Карты, и сервер должен иметь доступ в интернет. Переносил Решение между своими серверами - всё работает.
    Когда оформлю Решение в Модуль, в нем будут расширенные параметры (выбор нужных полей, поиск не только по адресу, но и по наименованию или реквизитам организации и т.п.). Этот пост кому-то послужит подсказкой того, как свои внешние проекты применить в Elma.