CSS の背景画像プロパティをバインドするにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/9303470

質問

スタイルの背景画像バインディングを作成することは可能ですか?

このコードを試してみました:

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

私も試してみました backgroundImage, 、引用符なし url, 、 それなし : 後 url, しかし、まだ機能しません。他のものはすべて、同様に、 color または backgroundColor バインディングは完璧に機能しています。

役に立ちましたか？

解決

で述べられているように ドキュメンテーション, 、制御するスタイルにはJavaScript名を使用する必要があります。

これは、使用する必要があることを意味します backgroundImage それ以外の background-image.

このようなもの：

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

他のヒント

なぜ誰もが（スジェシュを除く）この質問に答えていて、それでもハードコーディングをしているのかわかりません temp.png. 。あなたがaに拘束されていない場合 ko.observable プロパティは使用しないでください data-bind. 。 HTML要素の標準スタイルプロパティを使用するだけです。

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

URLを取得するためのデータバインディングについては、Sujesh Arukilの答えが私のためにうまくいったことを願っていますが、そうではありませんでした。誰かがその仕事をしているなら、私を啓発してください。

これが私のために働いたものですが、私はそれを気にしません。コンピューターを使用して、背景画像の値を取得しました。

ビューモデル

self.imageUrl = ko.observable();

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

HTMLで

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

ちなみに、カスタムバインディングをセットアップして、構文を扱いにくくしなくすることができます。

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

その後、HTMLでできることがあります

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

必要ありません : の中に url 背景画像のセクションです。 url(/foo.png).

バインディングでも使用する必要があります background-image これは style プロパティなので、次のように引用符で囲みます (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/

または単に連結します

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

KOドキュメントに基づいて、

KOの任意のプロパティに設定される値は、ViewModalプロパティ値です。

ここで、somepath = viewmodalプロパティは、背景画像へのパスです。

2つの名前がある場合は、小文字で最初の名前を使用し、上品の2番目の名前の最初の文字を使用します。例：

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

参照してください http://knockoutjs.com/documentation/style binding.htmlと http://www.comptechdoc.org/indepentent/web/cgi/javamanual/javastyle.html

プロパティ名の周りに引用符（単一の引用符）を置くだけです。あなたが持っているときはいつでも - プロパティ名で background-image また background-url 名前の周りに引用符を付ける必要があります

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

それが問題だ。ノックアウトドキュメントで言及されています。

あなたが言うとき：data-bind： "{... somecode ...}"あなたはjavascriptの中にあることを理解する必要があります。あなたが書く場合：バックグラウンドイメージは、背景（背景イメージ）から画像を差し引くことを試みます。それは未定義の変数です。その後、はるかに明確です。

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

私が使用した上記のものは、仕事をすると思います。

使用する場合background: 'url(imageUrl)', 、文字列のみと見なされます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top