M-V-VM设计问题。从ViewModel调用视图_从ViewModel调用视图中的方法_从视图调用ViewModel方法或查找其他选项 - 腾讯云开发者社区

M-V-VM设计问题。从ViewModel调用视图

M-V-VM（Model-View-ViewModel）是一种设计模式，主要用于分离用户界面（UI）逻辑、呈现逻辑和业务逻辑。在这种模式中：

Model：代表数据和业务逻辑。
View：负责显示数据并与用户交互。
ViewModel：作为View和Model之间的桥梁，处理View的逻辑并提供数据给View。

基础概念

Model：包含数据和业务逻辑，通常与数据库或其他数据源交互。
View：用户界面，显示数据并接收用户输入。
ViewModel：包含View的数据绑定和命令绑定，处理View的逻辑，但不直接与Model交互。

优势

分离关注点：将UI逻辑、业务逻辑和数据逻辑分离，便于维护和测试。
数据绑定：通过数据绑定，ViewModel可以自动更新View，反之亦然。
可测试性：ViewModel可以独立于View进行单元测试。
可重用性：ViewModel可以在不同的View中重用。

类型

单向绑定：数据从Model流向View。
双向绑定：数据可以在Model和View之间双向流动。
命令绑定：ViewModel中的命令可以绑定到View中的控件事件。

应用场景

WPF/Silverlight：MVVM模式在这些技术中得到了广泛应用。
现代Web开发：使用Angular、Vue.js等框架时，MVVM模式也很常见。
移动应用开发：如使用React Native、Flutter等框架。

从ViewModel调用视图

在MVVM模式中，ViewModel不应该直接调用View的方法或属性。相反，应该通过数据绑定和命令绑定来实现View和ViewModel之间的通信。

示例代码

假设我们有一个简单的WPF应用程序，其中有一个按钮和一个文本框。当按钮被点击时，文本框的内容会更新。

Model

public class MyModel
{
    public string Text { get; set; }
}

ViewModel

public class MyViewModel : INotifyPropertyChanged
{
    private MyModel _model;
    private string _displayText;

    public MyViewModel(MyModel model)
    {
        _model = model;
        DisplayText = model.Text;
    }

    public string DisplayText
    {
        get => _displayText;
        set
        {
            if (_displayText != value)
            {
                _displayText = value;
                OnPropertyChanged(nameof(DisplayText));
            }
        }
    }

    public ICommand UpdateTextCommand { get; }

    public MyViewModel()
    {
        UpdateTextCommand = new RelayCommand(UpdateText);
    }

    private void UpdateText()
    {
        DisplayText = "Updated Text";
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

View

<Window x:Class="MVVMExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <TextBox Text="{Binding DisplayText}" />
        <Button Content="Update Text" Command="{Binding UpdateTextCommand}" />
    </StackPanel>
</Window>

Code-Behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MyViewModel(new MyModel { Text = "Initial Text" });
    }
}