Wie kann ich binden Sie die CSS-Eigenschaft background-image?

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

Frage

Ist es möglich zu machen ein style-background-image-Bindung?

Ich habe versucht, diesen code:

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

Ich habe auch versucht backgroundImage, ohne Anführungszeichen in der url, ohne : nach url, aber es funktioniert immer noch nicht.Alle anderen, wie color oder backgroundColor Bindungen sind funktioniert perfekt.

War es hilfreich?

Lösung

Wie in der angegeben Dokumentation, Sie müssen den JavaScript -Namen für den Stil verwenden, den Sie steuern möchten.

Dies bedeutet, dass Sie verwenden müssten backgroundImage Anstatt von background-image.

Etwas wie das:

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

Andere Tipps

Ich bin mir nicht sicher, warum alle (außer Sujesh) diese Frage beantworten und immer noch schwer codieren temp.png. Wenn Sie nicht an a bindend sind ko.observable Eigenschaft dann nicht verwenden data-bind. Verwenden Sie einfach die Eigenschaft im Standardstil des HTML -Elements.

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

Für Datenbindung, um die URL zu erhalten, wünschte ich, Sujesh Arukils Antwort funktionierte für mich, aber das nicht. Wenn jemand das funktioniert, erleuchten Sie mich bitte.

Hier ist, was für mich funktioniert hat, aber es ist mir egal. Ich habe ein berechnet, um den Wert des Hintergrundbilds zu erhalten.

Im View -Modell

self.imageUrl = ko.observable();

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

In der HTML

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

Übrigens können Sie eine benutzerdefinierte Bindung einrichten, um die Syntax weniger unhandlich zu machen:

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

Dann können Sie in Ihrem HTML tun

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

Sie brauchen nicht die : in der url im Abschnitt hintergrund Bild, es ist nur url(/foo.png).

Ihre Bindung muss auch zu verwenden background-image da, dass ist die Eigenschaft Stil aus, aber in Anführungszeichen, so (backgroundImage ist die JavaScript-API für style):

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

Live-demo hier - http://jsfiddle.net/slace/EgUaM/

Bearbeiten Nach der Veröffentlichung des Beispiel Github gestartet erleben Datenbank-Themen so, hier ist eine Alternative jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

Oder einfach verkettet

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

Basierend auf KO -Dokumentation,

Der Wert, der auf eine Eigenschaft in KO festgelegt wird, ist der Ansichtsmodal -Eigenschaftswert.

wo eine Pfad = ViewModal -Eigenschaft, die Pfad zu Ihrem Hintergrundbild ist.

Wenn es zwei Namen gibt, verwenden Sie den Vornamen im unteren Fall und das erste Zeichen des zweiten Namens im oberen Fall. Beispiele:

color = color
background-color = backgroundColor
font-style = fontStyle
font-weight = fontWeight

bitte beziehen Sie sich auf http://knockoutjs.com/documentation/style-binding.htmlund http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Legen Sie einfach Zitate (einzelne Zitate) um den Eigenschaftsnamen. Wann immer du hast - im Eigenschaftsnamen zB background-image oder background-url Sie müssen Zitate um den Namen legen

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

Das ist das Problem. In der Knockout -Dokumentation erwähnt.

Wenn Sie sagen: Daten-Bind: "{... Somecode ...}" Sie müssen verstehen, dass Sie sich in JavaScript befinden. Wenn Sie schreiben: Hintergrundbild, versucht er, das Bild vom Hintergrund abzuziehen (Hintergrundbild). Das sind undefinierte Variablen. Dann ist es viel klarer.

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

Das oben genannte, das ich benutzte, nimmt an, um zu arbeiten.

Wenn du benutztbackground: 'url(imageUrl)', Es wird nur als Zeichenfolge betrachtet.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top