为razor cshtml创建轻巧的组件

我有一个基于Umbraco的应用程序，可以输出正常的剃须刀视图。我现在想用脚做一个苗条的组件。我首先选择的是一个注册流

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

这将输出一个app.js，然后我将其包含在带有普通

现在，任何具有id=“signup form”元素的页面都将获得注册表单。 这就是我遇到问题的地方

我的页面是多语言的，所以组件需要从CMS获取用于注册流的翻译文本（所以razor cshtml视图知道这些值，但不知道组件）

让我们想象一下，如果我的用户已登录，我希望在注册流中预先填充该用户的电子邮件地址。然后组件将需要获取所述电子邮件地址作为初始化值。因此，我的.net应用程序和razor/cshtml也知道这一点，但我如何才能将其提供给由app.js初始化的苗条应用程序呢

---

---

TL；DR如何在初始化期间从显示该组件的普通HTML视图中为我的svelte组件获取值？

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

window.myapp.config={
电邮：
}

然后在苗条中使用这些值

道具：{
电子邮件：window.myapp.email
}

---

或者，您可以创建一个返回此数据的api端点，只需获取它。

在CMS上构建时，在视图易于访问的控制器中获取值（对于api enpoint版本），可能需要比预期更多的工作。因此，我认为初始化对象将是我的选择。作为奖励：如果初始化对象是一个模型/类，则可以编写JSON序列化程序，将其转储到

窗口中。myapp

，无需重新定义每个属性

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

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