Bolero应用中新页面交互成员定义位置及报错解决咨询

我通过以下步骤创建了一个新的Bolero应用：

dotnet new -i Bolero.Templates
dotnet new bolero-app -o MyApp

在main.fs文件中添加了新页面的代码，新增内容如下：

type Page =
    // 新页面
    | [<EndPoint "/Tax">] Tax

type Model =
    {
        page: Page
        counter: int
// personDetails是包含first name、last name的记录类型
        user: personDetails
    ...
    }

let initModel =
    {
        page = Home
        counter = 0
        user = {
            firstName = "Max"
            lastName = "Meyer"
        }
    }

type Message =
    | SetPage of Page
    | ...
    | GetName
    | SetName of string

let update remote message model =
    let onSignIn = function
        | Some _ -> Cmd.ofMsg GetBooks
        | None -> Cmd.none
    match message with
    | SetPage page ->
        { model with page = page }, Cmd.none
    ....

    | GetName ->
        { model with user = { model.user with firstName = "Berta"} }, Cmd.none
    | SetName fstName ->
        { model with user = { firstName = fstName; lastName = "Meyer"} }, Cmd.none

let taxPage model dispatch =
    Main.Tax()
        .GetName // 报错："FS0039: The type 'Tax' does not define the field, constructor or member 'GetName'"
        .FirstName(model.user.firstName, fun fst -> dispatch (SetUser fst))
        .Elt()

let view model dispatch =
    Main()
        .Menu(concat {
            // 新页面
            menuItem model Tax "Tax Form"
        })

同时在main.html文件中添加了如下模板片段：

<template id="Tax">
    <h1 class="title">Tax declaration form</h1>
    <p>
        This is the tax page!
    </p>
    <p>
        <label for="fName">First name:</label>
        <input type="text" id="fName" name="fName" bind="${FirstName}"/> <br />
        <label for="lName">Last name:</label>
        <input type="text" id="lName" name="lName" /> <br />
        <button onclick="${GetName}" class="button">Get Name</button>
    </p>
</template>

现在无论我在Main.Tax()中调用.GetName、.SetName还是.FirstName，都会出现错误提示："The type 'Tax' does not define the field, constructor or member 'GetName'"，请问这些成员应该在哪里定义？

这些成员不需要你手动定义——Bolero会根据main.html里的模板自动生成对应的F#类型和成员。你遇到的错误是因为模板修改后，自动生成的代码没有更新，导致Tax类型里还没有你新增的GetName、FirstName这些成员。

解决步骤如下：

• 保存所有文件修改：确保main.html的模板修改已经保存。
• 重新构建项目：在项目根目录运行dotnet build，或者如果你用dotnet watch run启动项目，它会自动检测到模板文件的变化，重新生成对应的F#代码。
• 检查名称一致性：确保模板里的绑定/事件名称和F#代码里调用的完全一致：
  • 模板里的bind="${FirstName}"对应F#里的.FirstName(...)方法
  • 模板里的onclick="${GetName}"对应F#里的.GetName(...)方法
• 修正代码中的小错误：你代码里的dispatch (SetUser fst)应该是dispatch (SetName fst)，因为你定义的消息是SetName of string，否则会出现新的未定义成员错误。

当你重新构建后，Bolero的代码生成器会根据Tax模板里的内容，自动为Main.Tax()类型添加对应的方法，错误就会消失。

内容的提问来源于stack exchange，提问作者Alex_P