1

我有一个选项页面。为了简单起见，我将其缩减为启用/禁用水果的复选框。可以在几种水果之间进行选择，并且水果的数量会随时间而变化。还存在另一种快速过滤水果的选项。在https://github.com/cloudcrate/BlazorStorage的帮助下，设置存储到 LocalStorage 并从中检索

据我了解， bind 只能绑定到变量或属性，所以我不能这样做：

@{foreach (var fruit in AllFruits) {
        <input type="checkbox" bind=@CheckBoxChanged(fruit.Name)>@fruit.Name
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

这也不起作用，因为所有复选框都会切换相同的属性：

@{foreach (var fruit in AllFruits) {
        <input type="checkbox" bind=@CheckBoxEnabled>@fruit.Name
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

我最终做的是创建一个组件，该组件具有属性 Name 和 Enabled 以及一个指示状态更改的事件：

@{foreach (var fruit in AllFruits) {
    <Fruit Name=@fruit.Name 
           Enabled=@fruit.Enabled
           OnSettingsChanged=@((Action<string, bool>) FruitClicked)></Fruit>
    }
}
<input type="checkbox" bind=@Checked />Show all yellow fruits

我还有一个按钮，用于保存当前设置和事件 OnSettingsChanged 的​​处理程序：

<BlazorButton Color="Color.Primary" OnClick=@SaveFruitSettings>Save Changes</BlazorButton>

protected void FruitClicked(string name, bool enabled) {
        _fruits.FirstOrDefault(b => b.Name == name).Enabled = enabled;
}

禁用/启用黄色水果的单个复选框经常使用，应该直接生效。所以 Checked 属性在 get/set 中访问本地存储。单个水果不经常更换，只有在按下保存后才应保存到本地存储中。

此设置在 Blaxor 0.5.0 中运行良好，但在升级到 0.6.0 后就不行了。当点击黄色水果复选框时，所有单个水果 OnSettingsChanged 在使用 LocalStorage 中保存的值进行设置后都会被触发。运行访问 AllFruits 的 foreach 循环表明整个页面已重新呈现或类似。

我觉得我错过了如何做到这一点的大局。如何在不为每个选项创建单独的布尔属性的情况下显示多个选项的复选框？

4

0 回答 0