Обновить просмотр с помощью ссылок в Elm

Question

Я хотел бы отображать вкладки бутстрапа в Elm. Вкладки отображаются ОК со следующим кодом, но щелчок по ним не влияет. Я подозреваю, что Elm короткозамкнутый Javascript Bootstrap или что-то в этом роде. Я думаю, что я могу добиться того же эффекта, используя архитектуру 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

не знаю, если вы поняли это. Если нет, я думаю, что обычно вы обновляете состояние через вяза.

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