2015-11-09 24 views
9

Wie kann ich den Seitentitel in Ulme beim Programmstart einstellen?Legen Sie den Seitentitel in Ulme fest?

Ich fand dies in der Dokumentation: (http://elm-lang.org/docs/syntax)

Elm einige hat built-in-Handler-Port, der automatisch einige zwingend notwendig, Maßnahmen ergreifen:

title setzt den Seitentitel, ignoriert leere Strings

Allerdings kann ich meinen Kopf noch nicht vollständig um Ports wickeln, noch kann ich irgendwelche Beispiele für diesen bestimmten Port finden. So weiß ich zum Beispiel nicht einmal die Typensignatur des Ports.

Ich weiß, ich könnte dies tun, indem ich meine eigene index.html und das Elm-Programm darin einbetten würde, aber ich würde es gerne in elm selbst herausfinden, auch aus keinem anderen Grund, als es zu lernen erledigt. (Und hoffentlich lerne etwas über Ports auch ...)

Antwort

8

Die Art Unterschrift ist, was auch immer Sie es definieren. Als ein Beispiel für eine einfache Anwendung, den title Anschluss mit dem Titel einzustellen:

import Html exposing (text) 

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

main = 
    text "Hello, World!" 

Als etwas komplexeres Beispiel, das Sie auf den Seitentitel auf die aktuelle Zeit jede Sekunde

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

port title : Signal Float 
port title = every second 

main = 
    text "Hello, World!" 
+1

Awesome, thanks! Wie wird der Port ausgeführt? Es wird nicht von Haupt gerufen? Oder wird jede Port-Funktion zum Laden der Seite ausgeführt? –

+1

Dies funktioniert nicht ab v17! Der Titel-Port wurde entfernt. –

+1

@Andrew Badr Ich bekomme die gleichen Probleme auf V17. Finden Sie einen Weg, um es zu lösen? –

14

zu aktualisieren einstellen könnten Ab Elm v0.17 wurde der eingebaute title Port entfernt, aber es ist sehr einfach, den Port selbst hinzuzufügen. Das folgende Programm wird auf den Seitentitel, um „Dies ist der Titel“ beim Start:

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" 

Dann in Javascript muss in den Hafen abonnieren:

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