Elm 样式模型视图更新中数据绑定模型更新的等价物

Question

MVU 状态变化

据我了解 Elm 风格的模型-视图-更新架构，应用程序状态的更改遵循定义更新状态的消息的发送。这里的状态是不可变的，因此更改会导致一组全新的应用程序状态。

例如，在下面（取自 Fabulous 项目）中 Pressed 消息导致状态 Model.Pressed 变为 true。

我相信该消息将作为用户执行明确操作（例如单击提交或保存）的结果发送。

/// The messages dispatched by the view
type Msg =
    | Pressed

/// The model from which the view is generated
type Model =
    { Pressed: bool }

/// Returns the initial state
let init() = { Pressed = false }

/// The function to update the view
let update (msg: Msg) (model: Model) =
    match msg with
    | Pressed -> { model with Pressed = true }

/// The view function giving updated content for the page
let view (model: Model) dispatch =
    if model.Pressed then
        View.Label(text="I was pressed!")
    else
        View.Button(text="Press Me!", command=(fun () -> dispatch Pressed))

type App () as app =
    inherit Application ()

    let runner =
        Program.mkSimple init update view
        |> Program.withConsoleTrace
        |> Program.runWithDynamicView app

数据绑定状态更改

假设您在 WPF 中有一个模型，它可能实现 INotifyPropertyChanged 并使用数据绑定将您的状态附加到用户界面。所以，这里的状态是可变的，会随着时间改变。

当用户输入新值时，模型会因数据绑定而更新，而无需显式保存或提交。因此，模型中的任何计算值都会随着用户输入值而更新。下面是一个模型示例，它在输入新的出生日期时更新 Age 值。

public class PersonView: INotifyPropertyChanged
{
    private DateTime _birthday;
    public DateTime Birthday
    {
        get { return _birthday; }
        set
        {
            _birthday = value;
            PropertyChanged("Birthday");
            Age = CalculateAgeFromBirthday();
        }
    }

    private int _age;
    public int Age
    {
        get { return _age; }
        private set
        {
            _age = value;
            PropertyChanged("Age");
        }
    }

    void PropertyChanged(string property)
    {
        // Etc.
    }

    int CalculateAgeFromBirthday()
    {
        // Do you sums here;
    }
}

问题

我的问题是，在 Elm 风格的模型-视图-更新架构中是否有等效的方法来创建一个用户界面来更新这些 "calculated properties" 当用户以类似于数据绑定的方式输入值时使用可变模型查看？

Answer 1

Let's say you have a model in WPF...

如果你想在 WPF 中使用 Elmish，那么我建议使用 Elmish.WPF。该存储库包含许多示例，有助于快速理解。

My question is whether there is an equivalent way in Elm style model-view-update architectures to create a user interface that updates these "calculated properties" as the user enters values in a similar manner to how a data bound view with a mutable model?

我看到有两种方法可以做到这一点。

在您的 update 函数中，除了更新新输入的数据外，还明确计算派生数据。
在您的绑定中，计算派生数据。

Elm 样式模型视图更新中数据绑定模型更新的等价物

Equivalent of data binding model updates in Elm-style model-view-update

elmish

model-view-update