2016-03-26 3 views
1

Es funktioniert überall sonst ... Ich bin wirklich nicht sicher, wie ich darüber zu begründen.Jade-Interpolation funktioniert nicht in Attribut

Der Code direkt darunter interpoliert den checkedValue, aber da es "" um den checkedValue gibt, bleibt das Kontrollkästchen aktiviert. Aber ich kann die Anführungszeichen nicht entfernen oder es wird nicht funktionieren.

extends layout 

block content 
    h1.headLine= challenge.title 
    p Difficulty: #{challenge.difficulty} #{checkedValue} Points: #{challenge.points} //checkedValue interpolates to true or false 
    p= challenge.description 
    form(action="/submitChallenge" method="post") 
    label(for="challenge1") Mark as Solved! 
    input(type="checkbox" id="challenge" checked="#{checkedValue}" name="challenge" value="#{challenge._id}") 
    p #{checkedValue} //interpolates here too, without any " " 
    button(type="submit") Submit 

Der folgende Code lässt nur das # {checkedValue} als ohne Interpolation ist. Also .. das funktioniert nicht, entweder, obwohl die # {challenge._id} funktioniert gut !:

input(type="checkbox" id="challenge" "#{checkedValue}" name="challenge" value="#{challenge._id}") 

ich auch die Zitate habe versucht zu entfernen.

Nichts scheint zu funktionieren. Derzeit ist die Variable ein boolescher Wert, aber es spielt keine Rolle, ob ich sie interpolieren kann!

Ich habe darüber nachgedacht, es auf "checked" oder "" für unchecked zu setzen, aber ... Ich muss es immer noch interpolieren.

+0

'checked' ist ein boolesches Attribut, was bedeutet, dass seine Anwesenheit, nicht sein Wert, die Eigenschaft des Elements bestimmt. Solange es deklariert ist, wird das Kontrollkästchen aktiviert, unabhängig davon, auf welchen Wert es gesetzt ist. Um ein Kontrollkästchen nicht zu aktivieren, deklarieren Sie nicht das Attribut 'checked'. – Terry

+0

Ich weiß, aber das stimmt eigentlich nicht ganz. Sie können die Checkbox UN-checked mit checked = false aber checked = "false" wird das Kontrollkästchen aktivieren. Außerdem möchte ich eine dynamische Checkbox. Ich hatte vorher noch nie Probleme damit. Bei einigen Seiten wird das Kontrollkästchen aktiviert, und es hängt vom Benutzer ab. Warum kann ich das nicht tun? –

+0

Verwenden Sie einen HTML5 Doctype? Das könnte der Unterschied sein, den es macht. Siehe auch: http://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an-html-checkbox – Terry

Antwort

0

In Jade sollte das checked Attribut einen booleschen Wert verwenden und nicht als Zeichenfolge interpoliert werden. Stellen Sie außerdem sicher, dass Sie doctype html irgendwo in Ihrer Vorlage festgelegt haben.

doctype html 
input(type="checkbox" id="challenge" checked=!!checkedValue name="challenge" value="#{challenge._id}") 

Mit den folgenden Daten und einem Falsey Wert (0, undefined, null oder false)

{ 
    challenge: { _id: 1432513 }, 
    checkedValue: false 
} 

Will return

<!DOCTYPE html> 
<input type="checkbox" id="challenge" name="challenge" value="1432513"> 

Und ein truthey Wert

checkedValue: true 

Will return

<input type="checkbox" id="challenge" checked name="challenge" value="1432513"> 

Siehe die Boolesche Abschnitt Attribute in the Jade documentation und versuchen, in der online demo die obigen Werte aus.