Bootstrap-Popover mit ember.js-Vorlage

7

Ich versuche Bootstrap-Popover mit EmberJS zu verwenden, damit der Inhalt des Pop-ups funktioniert Sei eine Ember / Lenker Vorlage (mit Bindung etc). Wie kann das gemacht werden? (Ember 1.0.0-rc2)

    
Ori Shavit 14.04.2013, 23:20
quelle

5 Antworten

12

Hier ist ein Arbeitsbeispiel für ein Ember-Bootstrap-Popover (siehe Ссылка ):

%Vor%

Instanziieren Sie die Ansicht:

%Vor%

Hier könnte parentSelector z. Wähle eine Schaltfläche aus. Stelle sicher, dass du einen div-Container mit der ID #popovercontent in deiner my-popover-content-Vorlage hast, damit der contentSelector funktioniert. Natürlich müssen Sie die Vorlage vor der Initialisierung der Ansicht laden.

Zwei-Wege-Bindung sollte mit dieser Lösung funktionieren.

    
Robert 22.04.2013, 12:42
quelle
6

Ich habe Terrys Antwort ein wenig weiter verfolgt und denke, ich habe eine einfache, allgemeine Lösung für dieses Problem gefunden.

Ich habe eine Bootstrap-Popover-Komponente wie folgt erstellt:

%Vor%

Hier ist die zugehörige Vorlage:

%Vor%

Beachten Sie die Verwendung der "hide" -Klasse, um den ausgegebenen Inhalt zunächst auszublenden. Diese Klasse ist einfach "display: none". Ohne dies werden die Dinge nicht so funktionieren, wie Sie es hoffen würden.

Sobald Sie das haben, können Sie einfach so etwas tun, wann immer Sie ein Popover wollen:

%Vor%

Der Inhalt sollte in der Lage sein, was immer Sie wollen - beliebiges HTML, Rendering einer Komponente oder partiell, etc .. Natürlich können Sie andere TagNames, Klassennamen, Titel, Platzierung usw. nach Belieben angeben / p>

Ich hoffe, diese Lösung hilft.

    
eeggers 09.10.2014 20:56
quelle
2

ex wenn Sie ein Bild popup machen möchten, machen Sie so etwas in Ihrer Ansicht

%Vor%     
pjlammertyn 15.04.2013 11:13
quelle
2

Ich stieß auch auf dieses Problem und hatte das gleiche Problem, das Robert oben erwähnt hat, wo die akzeptable Lösung einfach nicht zu komplizierteren Szenarien passt.

Ich stieß auf eine sehr elegante Lösung, aber ich bin mir nicht sicher, wie zukunftsfähig es ist. Ich nutze die Funktion renderToBuffer - siehe unten:

%Vor%

Der Vorteil ist, dass Sie ein Modell einreichen und Dinge dynamisch machen können. Habe es nicht gründlich getestet, aber ich wollte es da draußen haben, um anderen zu helfen.

    
gcoladarci 12.05.2013 19:46
quelle
1

Ich nahm Roberts Antwort ein wenig weiter oben. Ich habe eine Komponente erstellt und verwende auch nur das jQuery-Element für den Inhalt, anstatt html () aufzurufen. (Dies verringert das Problem doppelter IDs auf der Seite.)

%Vor%

Ich habe Bootstraps "hide" -Klasse verwendet, um den Inhalt zunächst auszublenden. Dann habe ich die 'hide'-Klasse das erste Mal entfernt, bis das Popover angezeigt wird. Von nun an funktionieren die Dinge wie erwartet.

So verwenden Sie die Komponente in Ihrer Lenkervorlage:

%Vor%     
Terry Roe 09.10.2014 17:40
quelle

Tags und Links