为 razor cshtml 创建一个 svelte 组件

Question

我有一个基于 Umbraco 的应用程序，可以输出正常的剃刀视图。我现在想涉足并构建一个苗条的组件。我选择的入门流程是注册流程。

我用一些 svelte 文件构建了组件。然后我想用webpack和babel编译它，所以我创建了一个这样的入口点（我想我以后会在这里添加更多组件）

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

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

输出一个 app.js，然后我将其包含在 _Layout.cshtml 中，正常 <script src="~/Content/Scripts/app.js"></script>

现在任何包含 id="signup-form" 元素的页面都将获得注册表单。这是我运行遇到问题的地方。

我的页面是多语言的，因此组件需要获取翻译后的文本以用于 CMS 的注册流程（因此 razor cshtml 视图知道这些值但组件不知道）。
假设如果我的用户已登录，我想在注册流程中预先填写用户的电子邮件地址。然后组件需要获取所述电子邮件地址作为初始化值。因此，我的 .net 应用程序和 razor/cshtml 再次知道了这一点，但我如何才能将其提供给由 app.js 初始化的 svelte 应用程序？

TL;DR 如何在初始化期间从显示组件的正常 HTML 视图获取我的 svelte 组件的值？

Answer 1

解决这个问题的一种方法是在 .cshtml 文件中有一个初始化对象：

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

然后在您的 svelte 中使用这些值

   props: {
     email: window.myapp.email
   }

或者，您可以创建一个 api 端点来 returns 此数据，然后您只需获取它即可。

为 razor cshtml 创建一个 svelte 组件

Creating a svelte component for razor cshtml

razor

svelte

svelte-3