0

画像の簡単なリストと、クリックするたびにそれらの画像のサイズを変更するために使用するボタンがあります。この動作をいくつかの方法で実装しましたが、パフォーマンスと動作 (テンプレートの再レンダリング) に大きな違いがあります。私の質問は、Meteor でこれを実装するための推奨される方法は何ですか?

これは最小限の作業例です。実際には、画像はより識別しやすく、サイズの変更はさまざまなイベントからトリガーできます。

解決策 1 (デモの方法 = 遅い/再レンダリング):

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image">
    <img src="img.jpg" style="height: {{height}}"/>
</template>

Template.image.height = function() {
    return Session.get("height");
};

解決策 2 (jQuery + 状態):

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image">
    <img src="img.jpg"/>
</template>

Meteor.autorun(function() {
    $("img").css({height: Session.get("height")});
})

解決策 3 (jQuery):

Template.controls.events = {
    "click #change_size": function() {
        $("img").css({height: "20px"});
    }
};

<template name="image">
    <img src="img.jpg"/>
</template>

解決策 4 (リアクティブな親):

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image_set">
    {{#each image_set}}
    <img src="img.jpg" style="height: {{../height}}"/>
    {{/each}}
</template>

Template.image_set.height = function() {
    return Session.get("height");
};

解決策 5: ???

4

3 に答える 3

1

アプリケーションの柔軟性に応じて、またはjQueryベースのアプリからMeteorに移植するかどうかに応じて、＃1または＃3を使用します。Meteor.autorunすでに組み込みを使用している代替手段がある場合は、避けたいと思います。のような反応変数はSession、よりクリーンで意図的な感じがします。4番目の解決策は、実際には別の問題を解決します。それは、一度に複数の画像に高さを設定します。それはあなたが望むものではないかもしれません。

全体として、＃1はドキュメントにあり、テンプレートと連携してSessionのデフォルトの反応性を使用していることを考えると、最も流星的だと思います。

于 2013-03-12T12:00:58.950 に答える
0

解決策 5:

それが良い流星の実践と見なされているのか、それとも流星のベストプラクティスなどがあるのか​​ どうかはわかりません。解決策は、テンプレート化された埋め込み CSS ルールを使用することです。次の行はトリックを行うようです：

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<img src="img1.jpg" class="my_class" />
...
<img src="img1000.jpg" class="my_class" />

<template name="css">
<style media="screen" type="text/css">
img.my_class {
  height: {{height}};
}    
</template>

Template.css.height = function() {
    return Session.get("height");
};

長所：

  • jQueryがない
  • 単一テンプレートのレンダリング
  • すべてのスタイリングは、最適化されたブラウザー コードによって行われます

短所？

于 2013-03-25T22:15:00.040 に答える
0

#1 と #2 では、jQuery dom 操作とセッションが混在しています。パフォーマンスと一貫性の理由から、私はそれらを避けます。#3 と #4 が同等のパフォーマンスを持っている場合、#4 が適しています。そのセッションでは、必要に応じて他のイベント ハンドラーを簡単に "プラグイン" できるからです。

可能であれば、ラッパーのクラスを操作し、CSS ルールで画像の高さを設定することをお勧めします。

于 2013-03-12T22:47:03.137 に答える