Question

MVU状态更改

据我了解Elm风格的model-view-update体系结构，对应用程序状态的更改是在发送定义了更新状态的消息之后进行的。这里的状态是不可变的，因此更改会导致全新的应用程序状态集。

例如，在下面（取自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样式模型-视图-更新体系结构中，是否存在等效的方法来创建用户界面，以在用户输入值时更新这些“计算的属性”，其方式类似于使用数据绑定视图的方式可变模型？

Answer 1

假设您在WPF中有一个模型...

如果要在WPF中使用Elmish，则建议使用Elmish.WPF。回购包含许多样本，非常适合快速理解。

我的问题是，在Elm样式模型-视图-更新体系结构中，是否存在等效的方法来创建用户界面，以在用户输入值时更新这些“计算的属性”，其方式类似于使用数据绑定视图的方式可变模型？

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

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

等价于Elm-style-view-update中的数据绑定模型更新

1 个答案: