在Elm

时间:2016-05-16 08:17:41

标签: elm

我是elm(0.17)的新手,我试着了解它是如何工作的。在这种情况下,我尝试开发一种项目估算。 这就是我所做的:

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)

import Html.Events exposing (onClick)

main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

-- model
type alias Host = {
  name : String,
  cost : Int
}
type alias Model =
  { email : String
  , hosting : List Host
  , period : List Int
  , interventionDays : List Int
  , total : Int
  }

init : (Model, Cmd Msg)
init =
  (Model "init@email.fr" [{name="AAA", cost=15}, {name="BBB", cost=56}, {name="CCC", cost=172}] [1..12] [1..31] 0, Cmd.none)


type Msg = Submit | Reset

calculate : Int
calculate = 42 -- to test

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of
    Submit ->
      (model, calculate)
    Reset ->
      (model, Cmd.none)

-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


-- view
hostOption host =
  option [ value (toString host.cost) ] [ text host.name ]

durationOption duration =
  option [value (toString duration) ] [ text (toString duration)]

view : Model -> Html Msg
view model =
  Html.form []
    [ h2 [] [ text "Estimate your project"]
    , input [ placeholder model.email ] []
    , select []
      (List.map hostOption model.hosting)
    , select []
      (List.map durationOption model.period)
    , select []
      (List.map durationOption model.interventionDays)
    , Html.span [][text (toString model.total)]
    , button [onClick Submit] [text "Submit"]
    , button [onClick Reset] [text "Reset"]
    ]

我想我已经理解了榆树背后的一些想法,但我需要帮助,因为elm-make命令返回:

The 1st and 2nd branches of this `case` produce different types of values.

40|   case action of
41|     Submit ->
42|       (model, calculate)
43|     Reset ->
44|>      (model, Cmd.none)

The 1st branch has this type:

    ( a, Int )

But the 2nd is:

    ( a, Cmd a )

Hint: All branches in a `case` must have the same type. So no matter which one
we take, we always get back the same type of value.

Detected errors in 1 module.                                        

我理解这个问题,但我不知道如何修复它。我是否必须定义我的计算函数才能使用模型数据?

由于

2 个答案:

答案 0 :(得分:3)

我猜你想用total来更新模型的calculate字段。

update函数返回的第一个元组项是更新的模型。事实上,您的两个操作都会返回现有模型而不会更改它。所以你可以试试这个:

case action of
  Submit ->
    ({ model | total = calculate }, Cmd.none)
  Reset ->
   init

有关更新记录的语法,请参阅here

请注意,我还将Reset分支更改为返回init,即初始模型和命令。

答案 1 :(得分:2)

编译器错误告诉您更新方法在某些情况下将返回(Model, Cmd)元组,而在另一种情况下将返回(Model, Int)元组。

你拥有它的更新功能应该返回修改后的模型,还应该返回一个Cmd来执行一个动作,换句话说,就是(Model, Cmd)元组。

如果您返回(model, calculate),则会返回(Model, Int)元组,因为calculateInt。这就是破坏编译的原因。

所以要解决它,首先你需要决定如何处理每个Msg。我假设他们的名字是Calculate Msg将更新总数,而Reset Msg会将模型设置为默认状态。

为此你可以这样做:

    case action of
       Submit ->
          ({ model | total = calculate }, Cmd.none)
       Reset ->
          init

在这种情况下,两个分支都将返回(Model, Cmd)类型的元组。

请注意,Reset分支将返回init,其类型为(Model, Cmd)

查看官方指南以获取更多示例:http://guide.elm-lang.org/index.html