Gibt es in einer Ember.js -Lenkervorlage eine Möglichkeit, sowohl statische als auch dynamische Klassenattribute zu haben?

StackOverflow https://stackoverflow.com/questions/8807783

  •  26-10-2019
  •  | 
  •  

Frage

Nehmen wir an, ich möchte ein Element mit einer "Todo" -Klasse (statisch) und einer "is-done" -Klasse (dynamisch):

<div {{bindAttr class="todo isDone"}}>
  Other stuff in here
</div>

In diesem Fall wird erwartet, dass "Isdone" und "Todo" Eigenschaften in meinem Sichtungsobjekt sind, was ich für "Isdone" möchte, aber nicht für "Todo". Ich arbeite gerade damit um, indem ich eine "Todo" -Sache für meine Ansicht hinzufüge, die einer statischen "todo" -Sziel entspricht. Gibt es eine Möglichkeit, ein statisches Klassenattribut bei der Verwendung von Bindattr zu haben?

Geigenbeispiel: http://jsfiddle.net/nes4h/4/

War es hilfreich?

Lösung

BEARBEITEN:

Wir haben das in Ember behoben!

Bei einem Build vom Master oder nach 0,9.6 werden Sie jetzt tun:

<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>

Vorherige Antwort:

Sie können bei Verwendung leider nicht sowohl statische als auch dynamische Klassennamen haben bindAttr.

Ich schlage vor, eine oder mehrere berechnete Eigenschaften für Ihre Ansicht zu verwenden, um sowohl statische als auch dynamische Klassennamen auszugeben.

Es wäre sehr schön, sowohl statische als auch dynamische Klassennamen zu unterstützen, aber der Weg bindAttr Derzeit funktioniert es nicht möglich. bindAttr weiß nichts über das Element, an das es während der Template Compilation angehängt wird.

Andere Tipps

Ich weiß nicht, ob Sie es mit Bindattr tun können, aber die #view Mit Helper können Sie sowohl statische als auch dynamische Klassen festlegen:

{{#view App.TodoView class="todo" classBinding="isDone"}}
  inner content
{{/view}}

In Ember Master wurde heute eine Änderung verpflichtet, um statische Klassen festzulegen bindAttr durch Vorbereitung eines Dickdarms.

https://github.com/emberjs/ember.js/commit/ce385e3294be019215c55511c7f393aebc02e41

Dies kann sich natürlich vor der nächsten Veröffentlichung ändern, aber dies ist ein Problem, das das Ember Core -Team lösen möchte.

In Ember 1.10.0 ist Bindattr veraltet. Sie können eine Variable direkt an die Klasse von Div binden. Hier ist die Farbvariable an die Klasse eines DIV gebunden: 

<div class="{{color}}"></div>

Die Inline, wenn Helfer auch in diesen Kontexten verwendet werden kann:

<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>

http://emberjs.com/blog/2015/02/07/ember-10-0-releierte.html

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top