使用 Elm 中的链接更新视图

Question

我想在 Elm 中显示 bootstrap 选项卡。选项卡使用以下代码显示 OK，但单击它们没有任何效果。我怀疑 Elm 短路了 Bootstrap 的 Javascript 之类的。我想我可以使用 Elm 架构在单击选项卡时更新选项卡来达到相同的效果，但我发现的所有示例都涉及按钮和表单。

这是我正在使用的代码：

test_tab : List Html.Html
test_tab = [
              ul [class "nav nav-tabs"]
                 [
                  li [][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#home")]  [Html.text "Home"]]
                 ,li [class "active"][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#menu1")] [Html.text "Menu 1"]]
                 ,li [][Html.a [stringProperty "data-toggle" "pill", (Html.Attributes.href "#menu2")] [Html.text "Menu 2"]]
                 ]
            ,div [class "tab-content"]
                 [
                   div [id "home", class "tab-pane fade"]
                       [h3 [][Html.text "HOME"], Html.text "Some content in home"]
                  ,div [id "menu1", class "tab-pane fade in active"]
                       [h3 [][Html.text "Menu 1"], Html.text "Some content in mffenu 1"]
                  ,div [id "menu2", class "tab-pane fade"]
                       [h3 [][Html.text "Menu 2"], Html.text "Some content in menu 2"]
                 ]
           ]

Answer 1

不知道你有没有想出来。如果没有，我想一般你会通过 elm 更新状态。

module Main where

import Signal exposing(Mailbox)
import Html exposing(..)
import Html.Attributes exposing(..)
import Html.Events exposing(..)

-- model, update, etc. -------------------------

type Actions = NoOp | SetActive String

mailbox = Signal.mailbox NoOp

update action model  =
  case action of
    NoOp            -> model
    SetActive name  -> name

isActive model tabname =
  tabname == model

-- view ---------------------------------------

test_tabs address model = 
  let 
      isTabActive = isActive model
  in
     tablist [
       tab address "Home" isTabActive,
       tab address "About" isTabActive,
       tab address "Other" isTabActive
       ]

tablist tabs = ul [class "nav nav-tabs"] tabs

tab address name isTabActive = 
  let
      make_active = SetActive name
      isActiveTab = isTabActive name 
      classes = if isActiveTab then "active" else ""
  in
     li [class classes] [ a [href "#", onClick address make_active] [text name] ]

-- main ---------------------------------------

init = Signal.foldp update "Home" mailbox.signal

main =
  Signal.map (test_tabs mailbox.address) init

使用 Elm 中的链接更新视图

Update view using links in Elm

elm