Wie kann ich eine Knockout-Bindung an eine backgroundImage-URL vornehmen?

Ich habe ein observable-array mit

var items= [
    {"image": "/images/image1.jpg" },
    {"image": "/images/image2.jpg" },
    {"image": "/images/image3.jpg" }
];

Mein template sieht wie folgt aus:

<div data-bind="foreach: items">
   <div class="box" data-bind="style: {'background-image': url(image)}"></div>
</div>

Leider funktioniert das nicht. Was ich will, ist dieses:

<div>
  <div class="box" style="background-image: url(/images/image1.jpg)"></div>
  <div class="box" style="background-image: url(/images/image2.jpg)"></div>
  <div class="box" style="background-image: url(/images/image3.jpg)"></div>
</div>

Wie kann ich das erreichen?

InformationsquelleAutor der Frage user1482949 | 2012-06-26

  1. 59

    Müssen Sie Ihre Zeichenfolgen verketten:

    data-bind="style: { backgroundImage: 'url(\'' + image() + '\')' }"

    Wenn image ist tatsächlich ein beobachtbares, müssen Sie es nennen, oder du wirst am Ende der Verkettung der Funktion statt.

    Beachten Sie, dass, da du dich verbindlich zu einem Ausdruck mit der Eigenschaft, müssen Sie die Funktion aufrufen (mit ()). Andernfalls werden Sie am Ende mit einem Javascript-Ausdruck, verbindet Sie mit der Funktion selbst.

    Der einzige Grund, warum Sie brauchen nicht () für einfache Bindungen ist, dass Knockout erkennt, wenn die Bindung gibt eine-Eigenschaft-Funktion und ruft Sie auf für Sie.

    InformationsquelleAutor der Antwort SLaks

  2. 6

    Ich weiß nicht, ob das besser ist oder schlechter...

    Montierte ich die url() innerhalb meines modelview:

    var items= [
    {"image": "url(/images/image1.jpg)" },
    {"image": "url(/images/image2.jpg)" },
    {"image": "url(/images/image3.jpg)" }
];

    Dann könnte ich die Daten-binden Sie das Bild wie gewohnt:

    data-bind="style: { 'background-image': image }"

    InformationsquelleAutor der Antwort fitzgeraldsteele

  3. 2

    dies ist mein Beispiel. Verwenden Sie Sie immer,

    <div data-bind="foreach: items">
    <div class="box" data-bind="style: {'backgroundImage': 'url('+ image +')'}"></div>
</div>

    InformationsquelleAutor der Antwort Dima Dulin

Schreibe einen Kommentar