2016-05-01 5 views
0

Ich erstelle eine Master-Detail-Tabelle. Bevor ein Artikel ausgewählt wurde, sollten die Details nicht sichtbar sein und nur beim Klicken auf einen Artikel sichtbar sein.ember bind-attr-Klasse wird nicht vom Controller festgelegt

Der Grund, warum ich eine Klasse verwende, liegt darin, dass die Tabelle normalerweise 100% breit ist und ihre Größe ändert, wenn das Detail angezeigt wird. Dies ist noch nicht implementiert. Gerade jetzt, ich will nur die ‚mit Details‘ Klasse in die div eingefügt werden, wenn ich in der < li klicken>

Hier ist eine grobe twiddle: https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4

In meiner Vorlage, die < li > hat eine Aktion:

<li {{action 'showDetails'}}> 

, die die Aktion in meinem showdetails Controller feuert (ich weiß, dass es wegen der :) in Konsole Brennen):

withDetails: false, 
    actions: { 
     showDetails: function() { 
      console.log(":)"); 
      this.set('withDetails', true); 
     } 
    } 

, die die mit Detail Klasse meine Details div hinzufügen sollte:

<div {{bind-attr class=":game-details withDetails"}} > 

die mein CSS entsprechen sollte:

.game-details { 
    display: none; 
    border: 1px solid red; 
} 
.game-details.with-details { 
    display: block; 
    border: 1px solid green; 
} 

Es sollte so einfach sein. Was vermisse ich?

[EDIT] ich gerade gelernt, diesen Trick:

Falsch:

<div class="game-details" {{bind-attr class="withDetails"}}> 

Rechts:

<div {{bind-attr class=":game-details withDetails"}}> 

die die div zeigt, aber befestigen nicht ein mit Details Klasse kann ich zielen.

+0

@TameBurger: Stattdessen sollten Sie {{if}} in Ihrer Klasse Attribute, wie so verwenden eingebettet dies baut auf Ihren Spielen von diesem Posten twiddle: http://stackoverflow.com/questions/36898364/ ember-model-making-a-tabelle-of-items-click-for-detail – DaveC426913

+0

Wo finden Sie die Informationen, die Sie brauchen, um 'bind-attr' zu verwenden? Ich bin nur neugierig, ob wir die Ember-Dokumentation verbessern können. –

Antwort

2

bind-attr is deprecated since 1.13 und deaktiviert seit 2.0.

<div class="game-details {{if withDetails "with-details"}}"> 
    {{outlet}} 
</div> 
+0

OK, ich habe das versucht, aber jetzt bekomme ich eine Eigenschaft 'Ertrag' von undefined nicht lesen können. Hier ist ein Drehbuch, an dem ich arbeite: https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4 Aus irgendeinem Grund wird mein Schließen-Knopf nicht aufblähen. – DaveC426913

Verwandte Themen