J'essaie d'utiliser bootstrap Popover avec Emberjs, de sorte que le contenu de la Popover Soyez un modèle Ember / guidon (avec reliure, etc.). Comment cela peut-il être fait? (Ember 1.0.0-RC2)
5 Réponses :
EX Si vous souhaitez contempler une image, faites quelque chose comme ça dans vous, voir
imgTag: '<img src="smiley.gif" alt="Smiley face" height="42" width="42">',
didInsertElement: function () {
var self = this;
Ember.run.schedule('actions', this, function () {
self.$().popover({
title: 'Smile!!!',
html: true,
content: self.get('imgTag'),
placement: 'bottom',
trigger: 'hover'
});
});
},
willDestroyElement: function () {
this.$().popover('destroy');
}
Cela me permet d'utiliser HTML statique dans le contenu, comment peut-on rendre un modèle?
Contenu: Ember.handlebars.Compile ("Mon guidon {{{" guidonbarproperty}} ")
ou contenu: '
Voici un exemple de travail pour une popover Bootstrap Ember (voir ): instanciez la vue: ici, parentselector pourrait par exemple Sélectionnez un bouton. Assurez-vous de disposer d'un conteneur DIV avec ID #PopperContent dans votre modèle My-Popover-Content pour que le contenu Contentelector fonctionne. Bien sûr, vous devez charger le modèle avant l'initialisation de la vue. La liaison bidirectionnelle devrait fonctionner avec cette solution.
Pouvez-vous mettre cela dans un jsfiddle?
parfait. Dîner de poulet gagnant gagnant.
Récemment, j'ai rencontré des problèmes avec cette solution: retourner $ content.html () ne fonctionne pas toujours. Surtout si votre contenu devient plus complexe, vous devriez envisager d'utiliser API.JQUERY.com/REMOVE à la place , qui prendrait vraiment l'élément DOM et le déplacerait dans la popover. Malheureusement, je ne suis pas capable d'adapter le violon en conséquence. Ht
Je ne sais pas pourquoi vous avez besoin de Pareignentelector et ContentryLector . La solution la plus simple est décrite comme décrit dans cowbell-labs.com/...
Grabbing Le contenu HTML d'une balise non réalisée ne ressemble pas à la meilleure pratique, mais c'est simple et cela fonctionne pour moi. Les autres options que j'ai constatées pour avoir un contenu de ponpé de modèles impliquée de réécrire littéralement l'ensemble du code bootstrap dans une composante Ember, qui peut être une douleur.
Le jsfiddle dans la réponse "peut" avoir un problème. Inspection du code, je vois que la balise d'entrée dans le modèle a le même ID qui finit par la balise d'entrée de la teneur réelle de la fenêtre de la population. Avoir le même identifiant plusieurs fois dans une page n'est pas valide. Y a-t-il un moyen d'éviter cela?
J'ai également rencontré ce problème et j'ai eu le même problème Robert mentionné ci-dessus où la solution acceptable n'apparaît tout simplement pas bien à des scénarios plus compliqués.
J'ai couru dans une solution très élégante, mais je ne suis pas sûr à quel point il est futur. Je tire parti de la fonction Rendertobuffer - voir ci-dessous: p>
//make your popover view to be created later
App.PopoverView = Ember.View.extend({
templateName : 'name-of-your-template-with-content'
});
//then you make your link that will trigger the popover
App.PopoverLinkView = Ember.View.extend({
tagName : 'a',
didInsertElement : function(){
var that = this;
this.$().popover({
'html' : true,
'content' : function(el){
var detailView = App.PopoverView.create();
var html = detailView.renderToBuffer().buffer;
return html;
}
});
}
});
J'ai pris la réponse de Robert ci-dessus un peu plus loin. J'ai créé un composant et utiliser également l'élément JQuery pour le contenu au lieu d'appeler .html (). (Cela atténue le problème d'avoir des identifiants Dupliqués dans la page.)
{{#custom-popover popoverContentSelector='.popoverContents'}}
Popover Button
{{/custom-popover}}
J'ai pris la réponse de Terry un peu plus loin et je pense que j'ai proposé une solution générale simple à ce problème.
J'ai créé un composant bootstrap-Popover comme SO: P>
{{#bootstrap-popover title="My Fancy Popover" tagName="button"}}
<ul>
<li>my</li>
<li>awesome</li>
<li>popover</li>
<li>contents</li>
<li>example</li>
</ul>
{{/bootstrap-popover}}
C'est vraiment slick. Merci! Bien que ce soit certainement plus complexe que la réponse acceptée, je pense que sa réutilisabilité fait de cela le meilleur.
Il y a un problème avec cette approche, sous certaines circonstances non courantes: si le modèle rendant le contenu de la population a des éléments avec {{action ...}} appliqué, ils sont perdus parce que le composant est perdu. Faire consiste à cloner le collant HTML des éléments rendus par le modèle, dans de nouveaux éléments qui seront réellement rendus. Les gestionnaires d'action sont perdus dans ce processus. J'essaie toujours de comprendre comment surmonter cela. Cependant, rien de mal à la réponse en soi. Je sais que mon étui d'utilisation est très rare.
Cela fonctionne parfaitement! une question ! Comment fermer Opened Popovers Attendez-vous cliqué sur un?