视图模型中的数据未绑定到视图- Xamarin表单、React式UI

zsbz8rwp  于 2022-12-07  发布在  React
关注(0)|答案(2)|浏览(138)

欢迎,我正在尝试将字符串数组绑定到集合视图项源代码,但似乎我的视图模型不能传递数据,或者根本没有激活。我现在被卡住了。我试着在互联网上搜索,但没有找到任何解决方案,也试着完全按照React式用户界面示例所示,但仍然是相同的结果,或者应该说,没有结果。
查看方式:

<?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>

View.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;
    }
}
umuewwlo

umuewwlo1#

您似乎错过了在CollectionView上添加ItemSource。请尝试以下操作

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

pcww981p2#

我猜想视图的ViewModel属性为null,因为您没有显式创建一个。
您必须以某种方式用新的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。在www.example.com中使用了一个版本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

相关问题