Wie kann ich das `selected` Attribut dynamisch auf ein` <option>` Tag setzen?

Question

Die Ember guide on binding data attributes besagt, dass "Wenn Sie Datenbindung mit einem booleschen Wert verwenden, wird das angegebene Attribut hinzufügen oder entfernen." Ich versuche, diese Eigenschaft zu verwenden, um die selected Attribute auf <option> s dynamisch festzulegen. Ich finde, dass ich das Attribut disabled dynamisch festlegen kann, aber das Attribut selected wird immer weggelassen, nein, ob der Boolesche Wert wahr oder falsch ist.

Vor diesem Lenker Vorlage:

<option disabled={{false}} selected={{false}}>One</option> 
<option disabled={{true}} selected={{true}}>Two</option> 

ich folgende HTML erhalten:

<option>One</option> 
<option disabled>Two</option> 

Warum selected={{true}} produzieren kein selected Attribut in der gerenderten Ausgabe?

---

Um ein bisschen mehr Kontext zu geben, folge ich diesen Artikel auf How to do a select in Ember 2.0. Mit der in diesem Artikel beschriebenen Methode kann ich die Daten im Controller erfolgreich aktualisieren, wenn das Ereignis ausgelöst wird, aber das DOM wird aufgrund der Änderung nicht aktualisiert.

Ich habe this ember-twiddle zusammengestellt, die zwei select Elemente enthält. Man benutzt select={{bool}}, was nicht so funktioniert, wie ich es möchte. Die andere verwendet eine lange Hand {{#if bool}}...{{else}}...{{/if}}, die funktioniert, sieht aber schrecklich aus.

Answer 1

Danke an alle, die sich die Zeit genommen haben, eine Antwort auf meine Frage zu posten.Sonny ‚s Kommentar wies mich in die richtige Richtung:

selected ist eine Eigenschaft, kein Attribut mit einem Wert

Das war mir neu und es hat mir ein Kaninchen-Loch-Entdeckungs nach unten . Ich fand this SO answer als besonders hilfreich.

Als ich die Frage gestellt habe, habe ich den Unterschied zwischen Attributen und Eigenschaften nicht geschätzt. Ich habe erwartet, dass das Attribut selected im DOM erscheint, aber das passiert nicht. Ich verstehe jetzt, dass die selectedEigenschaft korrekt festgelegt ist, und die Tatsache, dass das <option>-Tag nicht im DOM mit einem selected-Attribut angezeigt wird, ist ohne Bedeutung.

Dieses Code-Snippet hilft zu veranschaulichen, warum ich verwirrt war. Die beiden Dropdown-Menüs <select> erscheinen gleich, wobei Option 2 anfänglich ausgewählt ist. Das selected Attribut erscheint nicht in dem DOM, wenn es selected={{true}}-Set verwenden, aber es ist in dem DOM im anderen Fall erscheinen:

<select> 
    <option>1</option> 
    <option selected={{true}}>2</option> 
</select> 

<select> 
    <option>1</option> 
    <option selected>2</option> 
</select> 

Hier the same snippet as a Twiddle

Answer 2

konnte ich die gewählte Option mit einer Variablen setzen, wie hier zu sehen: https://ember-twiddle.com/d3cfa5c59783fdbf02d32bcc3b3a028d?openFiles=templates.application.hbs%2C

Relevante Code:: https://gist.github.com/fenichelar/d3cfa5c59783fdbf02d32bcc3b3a028d

Hier ist der Ember Twiddle ist

application.js

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    one: false, 
    two: true, 
    three: false 
}); 

Anwendung. hbs

<div> 
    <select> 
    <option selected={{one}}>One</option> 
    <option selected={{two}}>Two</option> 
    <option selected={{three}}>Three</option> 
    </select> 
</div> 

Answer 3

können Sie einen Helfer benutzen, die Sie Optionswert zu einem Bezugs wie

irgendwo vergleicht

<select onchange={{action "countryChanged" value="target.value"}}> 
{{#each countries as |country|}} 
    <option value={{country.id}} selected={{is-equal country model.address.country_code}}>{{country.name}}</option> 
{{/each}} 
</select> 

In Ihrem „Helfer“ Ordner (erstellen, wenn nicht bereits vorhanden)

erstellen Sie Ihre Hilfsdatei wie "is-equal.js"

import Ember from 'ember'; 

export default Ember.Helper.helper(function([lhs, rhs]) { 
    return lhs === rhs; 
}); 

Welches wird nur 2 vergleichen Werte und geben Sie einen booleschen Wert zurück, Sie könnten auch einen Klassennamen oder was auch immer Sie möchten zurückgeben.

Die Aktion setzt den vom Benutzer ausgewählten Wert auf model.address.country_code. Der Helfer vergleicht die neuen Werte. Wenn der ausgewählte Wert mit dem ausgewählten Optionswert übereinstimmt, wird er auf true gesetzt.