1

ランダムに生成された背景画像を設定したいと思います。

私は Meteor を使用しており、Flickr API を呼び出して、背景画像として設定したいランダムな画像 URL を提供しています。

私が読んだところによると、現在、CSS は背景画像を設定するための推奨される方法のようです。動的に生成された URL を CSS に挿入する方法はありますか? Handlebars.js と CSS の混合を示す例が見つからないようです - これは可能ですか? または、CSS を避けて、従来の HTML の方法を使用して背景画像を設定する必要がありますか?

私は2つの異なる戦略を試してきました：

1) ハンドルバーを介して挿入された URL を使用して HTML に CSS 属性を作成するには、CSS 属性をハンドルバーと連結できないようです。

2) 私が試したもう 1 つの方法は、CSS 属性をテンプレート コードの変数として作成し、それをハンドルバーを介して HTML に返すことです。

Template.backgroundImage.background = function(){
//runs function to generate url and add to Session object   
    FlickrRandomPhotoFromSet(setID);
//create variable with html and css attribute concatenated to url
var backgroundImage = '<div style="background-image: url('+Session.get("RandomURL")+')"></div>';
//return resultant variable to HTML via template
    return backgroundImage;
};

次に、HTML に以下を挿入しました。

<template name="backgroundImage">
    {{background}}
</template>
4

3 に答える 3

8

このアプローチは私にとってうまくいきました：

テンプレートとして定義した内部スタイルシートを使用しています。URL は、ランダムに生成された URL と一致するように更新されます。

<template name="backgroundImage">
  <style>
  body {
  background-image:url({{background}});
  background-repeat: no-repeat;
  background-position: right top;
  }
  </style>
于 2013-05-20T02:21:04.750 に答える
1

randomMeteor には、追加できるmeteor 用に構築されたパッケージがあります

meteor add random

プロジェクトにまだ含まれていない場合。

このRandom.choice()メソッドは、たとえば URL の配列がある場合に役立ちます

var myurls = ["http://www.url.com/1","http://www.url.com/2","http://www.url.com/3"];
var the_random_url = Random.choice(myurls);

次に、あなたが言及したように、「ボディ」をcssとハンドルバーヘルパーで変更します{{background}}

<style>
    body {
        background-image:url({{background}});
        background-repeat: no-repeat;
        background-position: right top;
    }
</style>

または、jquery で編集します。

$('body').css({
    background-image:"url("+the_random_url+")",
    background-repeat: "no-repeat"
    background-position: "right top"
});
于 2013-05-20T09:45:31.440 に答える
-1

sugarjs は sample() メソッドを提供します

http://sugarjs.com/api/Array/sample

または、ソースを確認して独自に作成することもできます。

https://github.com/andrewplummer/Sugar/blob/master/lib/array.js#L906

配列からランダムな要素を返します。num が渡されると、配列から num 個のサンプルが返されます。

meteor.js プロジェクトでこれを使用します。そのAPIを使用して、テンプレートがレンダリングされた後にランダムな要素を取得します.

于 2013-05-20T08:24:15.227 に答える