视图模型中的数据未绑定到视图 - Xamarin 表单，反应式 UI答案

【问题标题】：Data from view model not binding to view - Xamarin Forms, Reactive UI视图模型中的数据未绑定到视图 - Xamarin 表单，反应式 UI
【发布时间】：2022-10-18 19:43:00
【问题描述】：

欢迎，我正在尝试将字符串数组绑定到集合视图项源，但我的视图模型似乎无法传递数据，或者根本没有激活。我被困在这一刻。我尝试在互联网上搜索并找不到任何解决方案，也尝试了反应式 ui 示例中所示的精确，但仍然得到相同的结果，或者我应该说没有结果。

看法：

<?xml version="1.0" encoding="utf-8"?>

<xamForms:ReactiveContentPage x:TypeArguments="dashboard:DashboardViewModel" xmlns="http://xamarin.com/schemas/2014/forms"
                              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                              xmlns:xamForms="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
                              xmlns:dashboard="clr-namespace:RoutinesTracker.Pages.Dashboard;assembly=RoutinesTracker"
                              x:Class="RoutinesTracker.Pages.Dashboard.DashboardView"
                              Title="Home"
                              BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.Content>
        <StackLayout Padding="15, 20">
            
            <CollectionView x:Name="ExampleCollectionView">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <StackLayout>
                            <Frame 
                                CornerRadius="15" 
                                HasShadow="False"
                                BackgroundColor="{DynamicResource PageElementColor}"
                                Margin="0, 5">
                                <StackLayout>
                                    <Label Text="{Binding}"
                                           VerticalOptions="CenterAndExpand"
                                           HorizontalOptions="CenterAndExpand" 
                                           TextColor="{DynamicResource PrimaryTextColor}"/>
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</xamForms:ReactiveContentPage>

查看.cs

using ReactiveUI;
using Xamarin.Forms.Xaml;

namespace RoutinesTracker.Pages.Dashboard
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DashboardView
    {
        public DashboardView()
        {
            InitializeComponent();

            this.WhenActivated(disposable =>
            {
                this.OneWayBind(ViewModel, vm => vm.ExampleCollectionList, v => v.ExampleCollectionView.ItemsSource);
            });
        }
    }
}

视图模型

using Prism.Navigation;
using RoutinesTracker.Core.Layout.ViewModels;

namespace RoutinesTracker.Pages.Dashboard
{
    public abstract class DashboardViewModel : ViewModelBase
    {
        public string[] ExampleCollectionList { get; set; }

        protected DashboardViewModel(INavigationService navigationService) : base(navigationService)
        {
            ExampleCollectionList = new[]
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };
        }
    }
}

如果有人需要，ViewModelBase 类：

using Prism.Navigation;
using ReactiveUI;

namespace RoutinesTracker.Core.Layout.ViewModels
{
    public abstract class ViewModelBase : ReactiveObject
    {
        private readonly INavigationService _navigationService;

        protected ViewModelBase(INavigationService navigationService) => _navigationService = navigationService;
    }
}

【问题讨论】：

标签： c# .net xamarin xamarin.forms reactiveui

【解决方案1】：

看起来您错过了在 CollectionView 上添加 ItemSource。尝试这个

<CollectionView ItemsSource="{Binding ExampleCollectionList }" />

【讨论】：

由于它是使用响应式 ui 构建的，因此应该已经被 this.OneWayBind(ViewModel, vm => vm.ExampleCollectionList, v => v.ExampleCollectionView.ItemsSource); 绑定：/
您可以尝试直接绑定，看看是否有效。如果有效，则意味着绑定过程出现问题。我检查了文件。我怀疑您可能需要使用可观察的集合来完成这项工作，请查看link。还有this one，尽管它在 WPF 下。

【解决方案2】：

我猜想视图的 ViewModel 属性是空的，因为你没有明确地创建一个。

您必须以某种方式使用新的 DashboardViewModel 填充 ViewModel 属性。您可以在视图的构造函数中创建一个

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DashboardView
    {
        public DashboardView()
        {
            InitializeComponent();
            ViewModel = new DashboardViewModel();

            this.WhenActivated(disposable =>
            {
                this.OneWayBind(ViewModel, vm => vm.ExampleCollectionList, v => v.ExampleCollectionView.ItemsSource);
            });
        }
    }

或者您可以使用 ViewLocation。这里使用了一个版本https://www.reactiveui.net/docs/getting-started/compelling-example#create-views，它使用反射来为所有实现 IViewFor 的东西找到 ViewModel

Locator.CurrentMutable.RegisterViewsForViewModels(Assembly.GetCallingAssembly());

或者您可以像这样手动注册它们：

Locator.CurrentMutable.Register(() => new ToasterView(), typeof(IViewFor<ToasterViewModel>));

这是一个使用 ViewModelRouting 并在 AppBootstrapper 类中注册视图的示例应用程序：https://github.com/GiusepeCasagrande/RoutingSimpleSample/blob/master/RoutingSimpleSample/RoutingSimpleSample/AppBootstrapper.cs

【讨论】：