Imposta il titolo della pagina in elm?

Question

Come posso impostare il titolo della pagina in elm, all'avvio del programma?

Ho trovato questo nella documentazione: (http://elm-lang.org/docs/syntax)

Elm ha qualche incorporato gestori delle porte che prendono automaticamente una certa azione imperativo:

title imposta il titolo della pagina, ignorando le stringhe vuote

Tuttavia, non sono ancora in grado di avvolgere completamente la testa attorno alle porte, né posso trovare alcun esempio di questa porta specifica in uso. Quindi non so, per esempio, nemmeno la firma del tipo della porta.

So che potrei farlo creando il mio index.html e incorporando il programma elm al suo interno, ma mi piacerebbe capirlo dentro l'elm stesso, anche se per nessun altro motivo se non imparare come è fatta. (E si spera che impari qualcosa anche sulle porte ...)

Answer 1

La firma del tipo è qualsiasi cosa tu definisca che sia. Come esempio di una semplice applicazione utilizzando la porta title per impostare il titolo:

import Html exposing (text) 

port title : String 
port title = "The page title" 

main = 
    text "Hello, World!" 

Come un esempio un po 'più complesso è possibile impostare il titolo della pagina per aggiornare all'ora corrente ogni secondo

import Html exposing (text) 
import Time exposing (every, second) 

port title : Signal Float 
port title = every second 

main = 
    text "Hello, World!" 

Answer 2

A partire da Elm v0.17 la porta integrata title è stata rimossa, ma è molto semplice aggiungere la porta. Il seguente programma imposterà il titolo della pagina per "Questo è il titolo di" al momento del lancio:

port module Main exposing (..) 

import Html.App as App 
import Html exposing (Html, text) 

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

port title : String -> Cmd a 

type alias Model = {} 

init : (Model, Cmd Msg) 
init = 
    ({}, title "This is the title") 


type Msg 
    = Noop 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
    Noop -> 
     (model, Cmd.none) 

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

view : Model -> Html Msg 
view model = 
    text "Hello World" 

Poi, in Javascript è necessario abbonarsi al porto:

var app = Elm.Main.fullscreen(); 
app.ports.title.subscribe(function(title) { 
    document.title = title; 
});