Question

我有一个基于Umbraco的应用程序，可以输出普通的剃刀视图。我现在想放下脚，建立一个苗条的组成部分。我首先选择的是一个注册流程。

我用一些苗条的文件构建了该组件。然后，我想用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初始化的苗条应用程序？

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

Answer 1

一种解决方法是在 .cshtml 文件中包含一个初始化对象：

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

然后在苗条中使用这些值

   props: {
     email: window.myapp.email
   }

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

为razor cshtml创建一个苗条的组件

1 个答案: