मैं सीएसएस पृष्ठभूमि-छवि संपत्ति को कैसे बांध सकता हूं?

Question

क्या शैली पृष्ठभूमि-छवि बाध्यकारी बनाना संभव है?

मैं इस कोड की कोशिश की:

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

मैं भी url के बाद url में backgroundImage की कोशिश की, उद्धरण चिह्नों के बिना, : बिना, लेकिन यह अभी भी काम नहीं कर रहा। अन्य सभी, जैसे color या backgroundColor बाइंडिंग पूरी तरह से काम कर रहे हैं।

Answer 1

जैसा कि documentation में बताया गया है, आपको उस शैली के लिए जावास्क्रिप्ट नाम का उपयोग करने की आवश्यकता है जिसे आप नियंत्रित करना चाहते हैं।

इसका मतलब है कि आपको के बजाय backgroundImage का उपयोग करना होगा।

कुछ इस तरह:

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

Answer 2

आप एक पृष्ठभूमि छवि के लिए url खंड में : की जरूरत नहीं है, यह सिर्फ url(/foo.png) है।

आपका बाध्यकारी भी background-image का उपयोग करने के बाद से है कि शैली की संपत्ति है जरूरत है, लेकिन उद्धरण में है, इसलिए की तरह (backgroundImage शैली के लिए जावास्क्रिप्ट एपीआई है):

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

लाइव यहाँ डेमो - http://jsfiddle.net/slace/EgUaM/

संपादित करें उदाहरण पोस्ट करने के बाद गिथब ने डेटाबेस समस्याओं का सामना करना शुरू कर दिया है, इसलिए यहां एक वैकल्पिक जेएसफ़िल - http://jsfiddle.net/slace/EgUaM/1/

Answer 3

बस संपत्ति के नाम के आसपास उद्धरण (एकल उद्धरण) डालें। जब भी आपके पास - संपत्ति नाम में है background-image या background-url आप नाम

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

समस्या यह है कि चारों ओर उद्धरण डाल करने के लिए की जरूरत है। नॉकआउट दस्तावेज में उल्लेख किया गया।

Answer 4

KO प्रलेखन के आधार पर,

मूल्य KO में किसी भी प्रॉपर्टी पर सेट किया जा रहा है ViewModal संपत्ति मूल्य।

जहां कुछपथ = व्यूमोडाल प्रॉपर्टी जो आपकी पृष्ठभूमि छवि के लिए पथ है।

Answer 5

जब दो नाम होते हैं, तो निचले मामले में पहले नाम और ऊपरी मामले में दूसरे नाम के पहले अक्षर का उपयोग करें। उदाहरण:

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

http://knockoutjs.com/documentation/style-binding.html और http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Answer 6

को देखें मुझे यकीन है कि क्यों हर कोई (Sujesh को छोड़कर) इस प्रश्न का उत्तर है और अभी भी कठिन temp.png कोडिंग नहीं हूँ। यदि आप ko.observable संपत्ति पर बाध्यकारी नहीं हैं तो data-bind का उपयोग न करें। बस HTML तत्व की मानक शैली संपत्ति का उपयोग करें।

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

यूआरएल प्राप्त करने के लिए बाध्यकारी डेटा के लिए मैं चाहता हूं कि सुजेश अरुकिल का जवाब मेरे लिए काम करता है लेकिन ऐसा नहीं हुआ। अगर किसी के पास यह काम कर रहा है, तो कृपया मुझे प्रबुद्ध करें।

यहां मेरे लिए क्या काम किया गया है लेकिन मुझे इसकी परवाह नहीं है। मैंने बैकग्राउंड-इमेज के मूल्य को पाने के लिए गणना की।

दृश्य मॉडल

self.imageUrl = ko.observable(); 

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

एचटीएमएल में

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

Answer 7

या सिर्फ जोड़

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

Answer 8

वैसे, आप वाक्य रचना बनाने के लिए एक कस्टम बाध्यकारी सेट कर सकते हैं कम अनावश्यक:

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

फिर अपने HTML में आप कर सकते हैं

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

Answer 9

जब यू कहते हैं: डेटा-बाँध: "{... somecode ...}" आपको यह समझना होगा कि यू जावास्क्रिप्ट के अंदर कर रहे हैं की जरूरत है। यदि आप लिखते हैं: पृष्ठभूमि-छवि वह पृष्ठभूमि (पृष्ठभूमि-छवि) से छवि घटाने की कोशिश करता है। Thats अपरिभाषित चर हैं। तो यह बहुत स्पष्ट है।

Answer 10

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

ऊपर एक मैं काम करने के लिए लगता है कि इस्तेमाल किया।

यदि आप background: 'url(imageUrl)' का उपयोग करते हैं, तो यह केवल एक स्ट्रिंग के रूप में विचार करेगा।