Создание компонента svelte для бритвы cshtml - PullRequest
Новая
       10

Создание компонента svelte для бритвы cshtml

0 голосов
/ 19 марта 2020

У меня есть приложение на основе Umbraco, которое выводит обычные бритвенные изображения. Теперь я хочу опустить ноги и построить стройный компонент. Для начала я выбрал поток регистрации.

Я собрал компонент с некоторыми файлами svelte. Затем я захотел скомпилировать его с помощью webpack и babel, поэтому я создал точку входа, подобную этой (я думал, что я добавлю сюда несколько компонентов позже) 

import Signup from './Components/Signup/signup.svelte';

new Signup({
    target: document.querySelector('#signup-form'),
    props: {
        someInputData: 'aStaticValue'
    }
});

Это выводит приложение. js, которое я затем включить в _Layout.cs html с обычным <script src="~/Content/Scripts/app.js"></script>

Теперь любая страница, содержащая элемент с id = "signup-form", получит форму регистрации. Здесь я сталкиваюсь с проблемами.

  1. Моя страница многоязычна, поэтому компонент должен получать переведенные тексты для использования в качестве потока регистрации из CMS (так что представление бритвы cs html знает эти значения, но не компонент).
  2. Давайте представим, что если мой пользователь вошел в систему, я хочу предварительно заполнить адрес электронной почты пользователя в процессе регистрации. Затем компонент должен получить указанный адрес электронной почты в качестве значения инициализации. Итак, снова мое. net приложение и razor / cs html знают об этом, но как я могу передать его приложению svelte, которое инициализируется приложением. js?

TL; DR Как получить значения для моего компонента svelte во время инициализации из обычного представления HTML, в котором отображается компонент?

1 Ответ

1 голос
/ 20 марта 2020

Одним из способов решения этой проблемы является наличие объекта инициализации в вашем .cs html файле: 

<script>
  window.myapp.config = {
    email: <% razor stuff %>
  }
</script>

, а затем использование этих значений в вашем svelte 

   props: {
     email: window.myapp.email
   }

альтернативно, вы создаете конечную точку API, которая возвращает эти данные, и просто извлекаете их.

...