Comment puis-je lier la propriété CSS background-image?

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

Question

Est-il possible de faire un style background-image de liaison?

J'ai essayé ce code: 

<div data-bind="foreach: itemList">
    <div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>          
</div>

J'ai aussi essayé backgroundImage, sans les guillemets dans url, sans : après url, mais il ne fonctionne toujours pas. Tous les autres, comme des liaisons de color ou backgroundColor fonctionnent parfaitement.

Était-ce utile?

La solution

Comme indiqué dans la documentation , vous devez utiliser le nom Javascript pour le style que vous souhaitez contrôler.

Cela signifie que vous devez utiliser backgroundImage au lieu de background-image.

Quelque chose comme ceci: 

<div data-bind="foreach: itemList"> 
    <div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>

Autres conseils

Je ne sais pas pourquoi tout le monde (sauf Sujesh) répond à cette question et encore difficile à coder le temp.png. Si vous n'êtes pas se lier à une propriété ko.observable alors ne pas utiliser data-bind. Il suffit d'utiliser la propriété de style standard de l'élément HTML. 

<div data-bind="foreach: itemList">
    <div style="background-image: url('temp.png');">some text</div>          
</div>

Pour la liaison de données pour obtenir l'URL que je souhaite la réponse de Sujesh Arukil a travaillé pour moi, mais cela n'a pas été. Si quelqu'un a ce travail, s'il vous plaît me éclairer.

Voici ce qui a fonctionné pour moi, mais je ne prends pas soin. J'ai utilisé a calculée pour obtenir la valeur de l'arrière-plan image.

Dans le modèle de vue 

self.imageUrl = ko.observable();

self.bgImageUrlStyle = ko.computed(function() {
    return "url(" + self.imageUrl() + ")";
});

Dans le HTML 

<div data-bind="style: { 'background-image': bgImageUrlStyle }">
</div>

Par ailleurs, vous pouvez configurer une liaison personnalisée pour rendre la syntaxe moins difficile à manier: 

ko.bindingHandlers.backgroundImage = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.style.update(element,
      function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
  }
};

Ensuite, dans votre code HTML que vous pouvez faire 

<div data-bind="backgroundImage: image"></div>

Vous n'avez pas besoin : dans la section url pour une image de fond, il est juste url(/foo.png).

Votre fixation doit également utiliser background-image puisque c'est la propriété de style, mais entre guillemets, comme si (backgroundImage est l'API JavaScript pour le style): 

<div data-bind="style: { 'background-image': 'url(https://www.google.com/intl/en_com/images/srpr/logo3w.png)' }"></div>​

Démo en direct ici - http://jsfiddle.net/slace/EgUaM/

Modifier Après avoir affiché l'exemple Github a commencé à éprouver des problèmes de base de données alors voici est un autre jsFiddle -

ou juste concaténer 

<div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"> </div>

basé sur la documentation KO,

valeur à SET à une propriété en KO est ViewModal Valeur de la propriété.

où somepath = ViewModal propriété qui est PATH à votre image d'arrière-plan.

Il suffit de mettre entre guillemets (guillemets simples) autour du nom de la propriété. chaque fois que votre avoir - au nom de la propriété par exemple background-image ou background-url vous devez mettre des guillemets autour du nom 

<div data-bind="style: {'background-image' : 'url(somepath)'}>

C'est le problème. Mentionné dans la documentation Knockout.

Quand u dire: data-bind: "{...} somecode ..." vous devez comprendre que u sont à l'intérieur du javascript. Si vous écrivez: background-image il essaie de soustraire l'image de fond (background-image). Cest sont des variables non définies. Ensuite, il est beaucoup plus claire.

<div data-bind="style: { background: 'url(' + imageUrl + ')' }" ></div>

Le ci-dessus, j'ai utilisé suppose au travail.

Si vous usebackground: 'url(imageUrl)', il considérera comme une chaîne uniquement.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top