[英]How to merge an IEnumerable into a ReactiveList and remove the duplicated items?
[英]How to use ReactiveList so UI is updated when new items are added
我正在創建一個帶有列表的Xamarin.Forms應用程序。 itemSource是一個reactList。 但是,將新項目添加到列表不會更新UI。 正確的做法是什么?
清單定義
_listView = new ListView();
var cell = new DataTemplate(typeof(TextCell));
cell.SetBinding(TextCell.TextProperty, "name");
cell.SetBinding(TextCell.DetailProperty, "location");
_listView.ItemTemplate = cell;
捆綁
this.OneWayBind(ViewModel, x => x.monkeys, x => x._listView.ItemsSource);
this.OneWayBind(ViewModel, x => x.save, x => x._button.Command); //save adds new items
查看模型
public class MyPageModel : ReactiveObject
{
public MyPageModel()
{
var canSave = this.WhenAny(x => x.username, x => !String.IsNullOrWhiteSpace(x.Value) && x.Value.Length>5);
save = ReactiveCommand.CreateAsyncTask(canSave, async _ =>
{
var monkey = new Monkey { name = username, location = "@ " + DateTime.Now.Ticks.ToString("X"), details = "More here" };
monkeys.Add(monkey);
username = "";
});
monkeys = new ReactiveList<Monkey>{
new Monkey { name="Baboon", location="Africa & Asia", details = "Baboons are Africian and Arabian Old World..." }
};
_monkeys.ChangeTrackingEnabled = true;
}
private string _username = "";
public string username
{
get { return _username; }
set { this.RaiseAndSetIfChanged(ref _username, value); }
}
private double _value = 0;
public double value
{
get { return _value; }
set { this.RaiseAndSetIfChanged(ref _value, value); }
}
public ReactiveCommand<Unit> save { get; set; }
public ReactiveList<Monkey> _monkeys;
public ReactiveList<Monkey> monkeys
{
get { return _monkeys; }
set { this.RaiseAndSetIfChanged(ref _monkeys, value); }
}
}
public class Monkey
{
public string name { get; set; }
public string location { get; set; }
public string details { get; set; }
}
嘗試使用ReactiveList屬性作為普通的自動屬性,以及上面我使用RaiseAndSetIfChanged方法的代碼中的屬性。
您的問題是您正在更改非UI線程上的monkeys
。 在其他框架中,這將引發Exception,但是在AppKit / UIKit中,這只是“奇怪的東西”(通常什么都不做)。
save = ReactiveCommand.Create(canSave);
save.Subscribe(_ =>
{
// Do the part that modifies UI elements (or things bound to them)
// in the RxCmd's Subscribe. This is guaranteed to run on the UI thread
var monkey = new Monkey { name = username, location = "@ " + DateTime.Now.Ticks.ToString("X"), details = "More here" };
monkeys.Add(monkey);
username = "";
});
這項技術似乎非常復雜。 它使我認為您想要做的事情比我想的要復雜。
這是一個純解決方案,用於通過以純MVVM方式綁定到ReactiveList<T>
將對象添加到列表框。
首先,xaml
<Window x:Class="ReactiveUIListBox.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:ReactiveUIListBox.ViewModel"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<viewModel:MainWindowViewModel x:Key="MainWindowViewModel"/>
</Window.Resources>
<Window.DataContext>
<StaticResource ResourceKey="MainWindowViewModel"/>
</Window.DataContext>
<Grid DataContext="{StaticResource MainWindowViewModel}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Azure">
<ListBox ItemsSource="{Binding Model.TestReactiveList}"></ListBox>
</Grid>
<Grid Grid.Column="1">
<Button x:Name="button" Command="{Binding TestCommand}" Content="Button" HorizontalAlignment="Left" Margin="78,89,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
</Grid>
</Window>
這是ViewModel
using System.Windows.Input;
using ReactiveUIListBox.Model;
using SecretSauce.Mvvm.ViewModelBase;
namespace ReactiveUIListBox.ViewModel
{
public class MainWindowViewModel : ViewModelBase
{
public MainWindowViewModel()
{
Model = new ReactiveModel<string>();
}
public ReactiveModel<string> Model
{
get;
set;
}
public ICommand TestCommand
{
get { return new RelayCommand(ExecuteTestCommand); }
}
private void ExecuteTestCommand(object obj)
{
Model.TestReactiveList.Add("test string");
}
}
}
最后是模型。
using ReactiveUI;
namespace ReactiveUIListBox.Model
{
public class ReactiveModel<T> : ReactiveObject
{
public ReactiveModel()
{
TestReactiveList= new ReactiveList<T>();
}
public ReactiveList<T> TestReactiveList
{
get;
set;
}
}
}
按下按鈕將填充列表框。 希望我還沒有完全簡化您的工作,但是您的代碼似乎無處不在。
我無法區分適合View,Model或ViewModel的代碼。
干杯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.