スタイルの背景画像をバインドすることはできますか？CSS背景画像プロパティをバインドするにはどうしたらいいですか？
私はこのコードを試してみました：
<div data-bind="foreach: itemList">
<div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>
</div>
私もurl後:せず、urlで引用符なし、backgroundImageを試してみましたが、それはまだ働いていません。 colorまたはbackgroundColorバインディングのような他のすべてのものは完全に動作しています。
documentationに記載されているように、制御したいスタイルにJavascript名を使用する必要があります。
これは、background-imageの代わりにbackgroundImageを使用する必要があることを意味します。このような
何か：あなたは、背景画像のためurlセクションに:を必要としない
<div data-bind="foreach: itemList">
<div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>
奇妙なことに、ドキュメントは実際の操作と矛盾しています... –
私はドキュメンテーションを赤字にしています。また、ほとんどのJavaScriptスタイル属性へのリンクもあります：http://www.comptechdoc.org/independent/web/cgi/javamanual/ javastyle.htmlでは、javacの名前を持たないタグには "普通の"タグ名を使用しています：/ –
私は彼らが 'attr'バインディングに一重引用符を使用していることを知っています。おそらくこれは現在同じ方法で動作しています。最新のものではありません。実際には、私はそれについて考えてみると、私は前にこれに問題があったと思う。 –
、それだけでurl(/foo.png)です。
background-imageを使用する必要がありますが、引用符で、そのように（
backgroundImageスタイル用のJavaScript APIである）結合：
<div data-bind="style: { 'background-image': 'url(https://www.google.com/intl/en_com/images/srpr/logo3w.png)' }"></div>
ライブデモ - http://jsfiddle.net/slace/EgUaM/
を投稿した後で、Githubがデータベースの問題を経験し始めたので、ここに別のjsfiddleがあります - http://jsfiddle.net/slace/EgUaM/1/
こんにちは、そのフィドルは私のために働かないのですか？私は引用符であなたの助言を試みたが、それはどちらも私のために働いていない。実際、私はフィドルからあなたのコードをコピーし、まだGoogle画像をロードするには何もありませんか？ –
投稿してからgithubがオフラインになったので（https://status.github.com/）、ノックアウトをjsfiddleにロードできません！ –
オンラインに戻りましたが、このjsfiddleは機能しません。 backgroundColor：http://jsfiddle.net/EgUaM/2/と背景画像タグを除く他のすべてのタグを受け入れます。 @ジョンパパ私はクラスバインディングを使用することができますが、私はスタイルバインディングを使用する必要があることを知っています:) –
プロパティ名の前後に引用符（一重引用符）を付けるだけです。プロパティ名に-があるときはいつでも。 background-imageまたはbackground-urlあなたが問題である名前
<div data-bind="style: {'background-image' : 'url(somepath)'}>
の前後に引用符を配置する必要があります。ノックアウトの文書に記載されています。
最後に二重引用符がありませんか？ btw、私の場合は動作しません。 –
KOのドキュメントに基づいて、KOで任意のプロパティに設定する
VALUEはViewModalプロパティ値です。
ここで、somepath = ViewModalプロパティは、背景画像のPATHです。
名前が2つある場合は、小文字のファーストネームと大文字のファーストネームを使用します。例：
color = color
background-color = backgroundColor
font-style = fontStyle
font-weight = fontWeight
（Sujesh除く）誰もがこの質問に答えると、まだハードtemp.pngをコード化された理由は、私はよく分からないhttp://knockoutjs.com/documentation/style-binding.html とhttp://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html
を参照してください。 ko.observableプロパティにバインドしていない場合は、data-bindを使用しないでください。単にhtml要素の標準スタイルのプロパティを使用してください。私はSujesh Arukilの答えは私のために働いたいURLを取得するために、データバインディングの
<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>
またはちょうどところで
<div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"> </div>
を連結は、次の構文を作るためにカスタムバインディングを設定することができます扱いにくい：
uが言うとき10は、その後、あなたのHTMLにあなたが
<div data-bind="backgroundImage: image"></div>
これが受け入れられる回答である必要があります。きれいで、簡潔で、使いやすく、再利用が簡単です。 – Jed
行うことができます。データバインドを： "{... somecode ...}" あなたはuはジャバスクリプト内であることを理解する必要があります。あなたが書く：background-image彼は背景から画像を減算しようとします（背景画像）。 Thatsは未定義の変数です。それははるかに明確です。
<div data-bind="style: { background: 'url(' + imageUrl + ')' }" ></div>
私は仕事に想定使用上記1。
background: 'url(imageUrl)'を使用すると、文字列としてのみ扱われます。
実際にURLを提供するためにプロパティにバインドされましたか？あなたの例から、use style = "background-image：..."を使うことができるので、Knokoutデータバインドを使用しないハードコードされたURLがあります。私はURLを提供するプロパティにバインドしようとしています。私はちょうどURLを含むことを検討しています：（temp.png）ハックとしてプロパティで。 – Thomas