l'attribut de style avec emberjs

Est-il un moyen de définir des propriétés css en utilisant emberjs propriétés " auto de liaison ?

Quelque chose comme:

<div {{bindAttr style="background-color: divColor;"}}>
    ...
</div>

Ma règle d'or avec de la braise, c'est que, si quelque chose est difficile, ne pas le faire. La raison pour laquelle il n'est pas simple de lier le style attribut est parce qu'il est mal vu de inline les styles de cette façon. En règle générale, vous souhaitez séparer vos styles dans le fichier css et de l'utilisation des classes pour identifier l'élément dom à être de style dans vos templates. Donc, vous auriez <div {{bindAttr class="color"}}> ensuite définir le color fonction de votre contrôleur et de créer les styles appropriés dans votre css. Il y a quelques morceaux différents de jeu, mais ce modèle échelles et les gens vont comprendre votre base de code.
Attendre si vous souhaitez utiliser background-size: cover; sur une image, qui est généré dynamiquement (comme la réalisation d'un profil d'utilisateur pic étirer pour couvrir quelque chose). Les styles en ligne sont nécessaires parfois.

OriginalL'auteur Maël Nison | 2012-02-23

ember.js

7

Veuillez noter qu'à compter du ember 1.13. la liaison attributs (bind-attr) est obsolète. Vous devez utiliser un code similaire à celui de se lier à la classe:
```
<div class={{myClass}}></div>
```
En outre, style de liaison dans ce mode n'est pas recommandée car elle peut présenter des failles XSS. Les modèles HTML automatiquement échappe HTML pour prévenir les attaques de type XSS lors de l'utilisation de {{...}}, mais les attributs de style ont des vulnérabilités supplémentaires à l'extérieur de la portée de la intégrée de s'échapper.

L'approche recommandée est d'échapper à la CSS vous-même (c'est à dire de la création de la escapeCSS fonction qui permettrait d'échapper à la CSS spécifique de façon appropriée pour prévenir les attaques de type XSS - ce n'est pas une fonction intégrée. Vous pouvez commencer avec Ember.Handlebars.Utils.escapeExpression et d'ajouter une vérification supplémentaire à partir de la base.) Plus d'informations peuvent être trouvées ici:
https://guides.emberjs.com/v2.2.0/templates/writing-helpers/#toc_escaping-html-content

Puis vous dire de Braise que la chaîne est "safe" en utilisant Ember.String.htmlSafe, et de Braise ne va pas essayer d'échapper à ce contenu.

contrôleur:
```
myStyle: Ember.computed('color', function() {
    var color = escapeCSS(this.get('color'));
    return new Ember.String.htmlSafe("color: " + color);
  })
```
modèle:
```
<div style={{myStyle}}></div>
```
Référence: http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes

Je ne suis pas sûr escapeCSS est facilement accessible de la fonction et de Ember.Handlebars.SafeString() seulement les marques d'une chaîne comme sûrs, mais ne le rend automatiquement coffre-fort.
Les développeurs ont besoin pour créer le escapeCSS fonction, et SafeString() a été dépréciée en faveur de Ember.String.htmlSafe (j'ai édité la réponse pour que cela soit plus clair)

OriginalL'auteur QuantumLicht
7

Un autre moyen simple de le faire est d'ajouter une propriété calculée à votre modèle.

Modèle ----
```
App.Photo = Em.Object.extend(
  objectId: null
  url: ""
  style: (-> 
    "background-image:url('" + @get("url") + "')"
  ).property("url")
)
```
Modèle -----
```
{{#each item in App.photoController}}
<div {{bindAttr style="item.style"}}></div>
{{/each}}   
```
J'ai eu ce travail, et semble être le moyen le plus simple pour aller à ce sujet.

Cette solution est beaucoup plus propre
cette aide peut être utile... gist.github.com/Artistan/8ee82f6753dca632ca3307917b4e6034

OriginalL'auteur WallMobile

Pas exactement comme ça, mais à proximité. Vous devrez construire des style chaîne vous-même. Regardez cette jsFiddle.

App = Ember.Application.create();
/**************************
* Models
**************************/


/**************************
* Views
**************************/
App.View = Ember.View.extend({
    style: function() {
      return "background-color:" + this.get('color');
    }.property('color').cacheable()
});

/**************************
* Controllers
**************************/
App.set('controller', Ember.Object.create({
  color: "transparent",

  red: function() {
    this.set('color', 'red');
  },

  blue: function() {
    this.set('color', 'blue');        
  },

  style: function() {
   return "background-color:" + this.get('color');
  }.property('color').cacheable()
}));
/**************************
* App Logic
**************************/
$(function() {

modèle:

{{#view Ember.Button target="App.controller" action="blue"}}BLUE{{/view}}  
  {{#view Ember.Button target="App.controller" action="red"}}RED{{/view}} 

  {{#view App.View colorBinding="App.controller.color" attributeBindings="style"}}
    Color is {{App.controller.color}}
  {{/view}}

   <hr>
   <div {{bindAttr style="App.controller.style"}}>And another way...</div>

Bel exemple ud3323! Juste pour être clair pour les OP, les bindAttr helper (lié à une propriété de style) peut être utilisé au lieu de créer des vues séparées.
mis à jour le jsFiddle pour afficher à la fois.
La deuxième façon est obsolète, mais vous pouvez le faire dans la classe d'affichage: attributeBindings: ['style'],

OriginalL'auteur Roy Daniels

Récente de Braise version 2.3.0 de cette écriture) permet à droite avant l'incorporation de la style.

//bar-graph.js
import Ember from 'ember';

export default Ember.Component.extend({  
  classNames: ['bar-graph'],

  inlineStyle: Ember.computed('attrs.min', 'attrs.max', 'attrs.value', function() {
    let min = this.get('attrs.min');
    let max = this.get('attrs.max');
    let value = this.get('attrs.value')
    let percentage = Math.round(value / (max - min) * 100);
    return new Ember.Handlebars.SafeString(`width: ${percentage}%`);
  })
});

<!-- bar-graph.hbs -->
<div class="bar" style={{inlineStyle}}>{{value}}</div>

Live exemple

Avis de la Ember.Handlebars.SafeString fonction. Ce doit être utilisée pour éviter les avertissements de sécurité de Braise. Braise seulement assainit html, pas de css, c'est donc le contourner.

OriginalL'auteur Danail Nachev

2

J'ai essayé d'utiliser à la réponse fournie par @WallMobile, mais il a quelques problèmes de syntaxe. Donc, c'est la syntaxe correcte pour être utilisé.
```
App.Photo = Em.Object.extend({
  objectId: null,
  url: "",
  style: function() {
    return "background-image:url('" + this.get("url") + "')"
  }.property("url")
})
```
la syntaxe est coffeescript/emberscript :P. Vôtre ne fonctionnera pas, que vous avez oublié la virgule est derrière objectId et url.
Merci pour la correction, j'ai juste copié à partir de la WallMobiles code fourni ci-dessus et vite fixé le style à la normale de la fonction javascript. Merci d'avoir remarqué ça. Donc, a été coffeescript la syntaxe, je n'était pas au courant du fait, parce que je n'ai jamais utilisé coffeescript. 🙂
Cela ne fonctionne toujours pas comme vous avez besoin de retourner la chaîne. :]
Merci à vous tous pour souligner les enjeux, les mises à jour maintenant.

OriginalL'auteur Sajid Ali
2

HTMLBars à vous maintenant de faire cette mise à niveau vers la dernière braise/ember-cli de prendre avantage de la nouvelle substance.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.