Làm cách nào để tạo liên kết loại trực tiếp tới URL backgroundImage?

Question

Tôi có một mảng quan sát được với

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

mẫu của tôi trông như thế này:

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

Thật không may, điều này không làm việc. Những gì tôi muốn là:

<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> 

Làm cách nào để tiếp cận điều này?

Answer 1

Bạn cần phải nối dây của bạn:

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

Nếu image thực sự là một quan sát, bạn sẽ cần phải gọi nó, hoặc bạn sẽ kết thúc concatenating chức năng để thay thế.

Lưu ý rằng vì bạn đang ràng buộc với một biểu thức liên quan đến thuộc tính, bạn phải gọi hàm (với ()). Nếu không, bạn sẽ kết thúc bằng một biểu thức Javascript để nối chính hàm đó.
Lý do duy nhất bạn không cần () cho các ràng buộc đơn giản là Knockout phát hiện khi liên kết trả về một hàm thuộc tính và gọi nó cho bạn.

Answer 2

Tôi không biết nếu điều này là bất kỳ tốt hơn hoặc tồi tệ hơn ...

tôi lắp ráp url() bên modelview của tôi:

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

Sau đó, tôi có thể dữ liệu ràng buộc các hình ảnh như bình thường :

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

Answer 3

đây là ví dụ của tôi. Luôn sử dụng nó

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