如何绑定到 Blazor 中名称中包含破折号的属性？

Question

所有示例都展示了如何使用 @bind-attributename 在 blazor 中创建双向绑定。但是如果属性名是attribute-name 或更糟：data-attribute-name，怎么办？我在 Visual Studio 中不断收到错误消息，通知我它无法解析符号“绑定”。

我们使用具有我想要绑定的属性的自定义 WebComponent，如下所示：

@foreach(var item in Items)
{
    <smart-multi-select-checkbox data-checkbox-details="@item"
                                 data-checked="@item.IsChecked">
    </smart-multi-select-checkbox>
}

我需要双向绑定data-checked 属性。或者，如果这不可能，我需要捕获自定义事件data-check-changed。但这也不是很直接。

Answer 1

据我所知，如果您使用@bind-checked=@item.IsChecked 形式的绑定，那么您的组件/元素需要有一个相应的checkedChanged 事件，该事件会在checked 更改时触发。 Blazor 专门查找 {attributeName}Changed。我相信一些标准元素不需要这个，因为它们在 Blazor 中是自动硬连线的。

但是，如果您有非标准属性，Blazor 将无法知道更改通知的来源。所以你也需要在元素/组件中添加一个@bind-checked:event="nameOfEvent"。以下对我来说编译得很好（并且ViewModel.Question 是一个真实的对象，但是data-test 和OnChange 是虚构的）：

<div @bind-data-test=@ViewModel.Question @bind-data-test:event="OnChange">test</div>