Làm cách nào để liên kết thuộc tính hình ảnh nền CSS?

Question

Có thể tạo liên kết hình nền theo phong cách không?

Tôi đã thử mã này:

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

Tôi cũng đã cố gắng backgroundImage, mà không có dấu ngoặc kép trong url, mà không : sau url, nhưng nó vẫn không làm việc. Tất cả những người khác, như các liên kết color hoặc backgroundColor đang hoạt động hoàn hảo.

Answer 1

Như đã nêu trong documentation, bạn cần phải sử dụng tên Javascript cho kiểu bạn muốn kiểm soát.

Điều này có nghĩa là bạn sẽ phải sử dụng backgroundImage thay vì background-image.

Something như thế này:

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

Answer 2

Bạn không cần : trong phần url cho một hình ảnh nền, nó chỉ url(/foo.png) là.

bạn ràng buộc cũng cần phải sử dụng background-image vì đó là tài sản phong cách, nhưng trong dấu ngoặc kép, như vậy (backgroundImage là API JavaScript cho phong cách):

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

sống bản demo ở đây - http://jsfiddle.net/slace/EgUaM/

Chỉnh sửa Sau khi đăng ví dụ Github bắt đầu gặp phải sự cố về cơ sở dữ liệu, do đó, đây là một thay thế jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

Answer 3

Chỉ cần đặt dấu ngoặc kép (dấu nháy đơn) xung quanh tên thuộc tính. bất cứ khi nào bạn có - trong tên thuộc tính, ví dụ: background-image hoặc background-url bạn cần phải đặt dấu ngoặc kép quanh tên

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

Đó là vấn đề. Được đề cập trong tài liệu Knockout.

Answer 4

dựa trên tài liệu KO,

GIÁ TRỊ được đặt thành bất kỳ sản phẩm nào trong KO là giá trị thuộc tính ViewModal.

nơi somepath = Thuộc tính ViewModal là PATH cho hình nền của bạn.

Answer 5

Khi có hai tên, hãy sử dụng tên đầu tiên trong chữ thường và ký tự đầu tiên của tên thứ hai trong chữ hoa. Ví dụ:

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

vui lòng tham khảo http://knockoutjs.com/documentation/style-binding.html và http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Answer 6

Tôi không chắc chắn lý do tại sao tất cả mọi người (trừ Sujesh) được trả lời câu hỏi này và vẫn cứng mã hóa các temp.png. Nếu bạn không liên kết với thuộc tính ko.observable thì không sử dụng data-bind. Chỉ cần sử dụng thuộc tính kiểu chuẩn của phần tử html.

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

Để gắn kết dữ liệu để nhận url tôi muốn câu trả lời của Sujesh Arukil có hiệu quả đối với tôi nhưng không. Nếu có ai làm việc đó, xin hãy khai sáng cho tôi.

Đây là những gì hiệu quả đối với tôi nhưng tôi không quan tâm. Tôi đã sử dụng tính toán để lấy giá trị của hình nền.

Trong mô hình xem

self.imageUrl = ko.observable(); 

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

Trong HTML

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

Answer 7

hoặc chỉ nối

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

Answer 8

Bằng cách này, bạn có thể thiết lập một tùy chỉnh ràng buộc để thực hiện cú pháp ít khó sử dụng:

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

Sau đó, trong HTML của bạn, bạn có thể làm

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

Answer 9

Khi u nói: dữ liệu ràng buộc: "{... somecode ...}", bạn cần phải hiểu rằng u là bên trong javascript. Nếu bạn viết: background-image anh ta cố gắng trừ hình ảnh ra khỏi nền (background-image). Đó là các biến không xác định. Sau đó, nó là rõ ràng hơn nhiều.

Answer 10

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

Tôi đã sử dụng giả định ở trên để làm việc.

Nếu bạn sử dụng background: 'url(imageUrl)', nó sẽ chỉ coi là một chuỗi.