0

私は Sharre social mediq jquery プラグインhttp://sharrre.com/#を見 ています。以下はその使用方法の例です。

simple_jquery_social.js の例:

$('#sharrre').sharrre({
share: {
  googlePlus: true,
   facebook: true,
  twitter: true
 },
url: 'http://sharrre.com'

}))

したがって、通常の Rails の使用法では、上記をアセット ディレクトリに (sharrre jquery lib と一緒に) 追加し、ビューに 'div id=sharrre' タグを配置すれば完了です。しかし、.html.erb ビュー テンプレートで使用する Rails ヘルパー関数を作成し、たとえば Google プラスを表示するかどうかを動的に決定したいと考えています。だから私は次のようなものが欲しいです：

<%= my_helper :googlePlus=>false %>

次に、私の環境は、上記の jquery コードの googlePlus 変数が false になることを認識する必要があるため、googlePlus ボタンは表示されません。**要点は、jquery プラグインで利用可能なより多くのオプションを、Rails を介して動的に制御することです。しかし、それを行うには、Rails を介して jquery 変数を動的に設定できる必要があります。上記の例は、jquery 変数を手動で変更するだけでよいので些細なことだと思いますが、Rails を使用して URL パラメータを動的に設定することもできます。 .

これを達成するための優れたメカニズムは何ですか、それとも可能ですか?

4

1 に答える 1

0

ID、URL、およびオプションのハッシュをパラメーターとして受け取るヘルパーを作成します。

次に、ヘルパーは JS と html の混合を生成し、必要な JS コードと div の両方を出力します。

def sharrre_tag(div_id, url, options = {})
  div_str = "<div id='#{div_id}'></div>".html_safe
  js_str = "<script>".html_safe
  #Add code to append specific js code and test all option existence and append time to js_str
  js_str += "</script>".html_safe
  return js_str + div_str
end

ビューでは、適切なパラメーターを使用してヘルパーを呼び出すだけです

オプション 2. JS を HTML から分離する

これを実現したい場合は、別の JS ファイルに JS コードを記述して、各要素を class で取得できますsharrre_div。それぞれについて、特定の html データ属性が存在するかどうかをチェックします: data-sharrre-googlePlus、data-sharrre-twitterなどdata-sharrre-url... このオプションは JS に大きく依存しています

JS : body onload イベントにカプセル化する

var sharrre_attr_array = ['data-sharrre-googlePlus', 'data-sharrre-facebook', 'data-sharrre-twitter'];
$('.sharrre_div').each(function(index){
    var share_hash = {};
        var current_div = $(this);
        $.each(sharrre_attr_array, function(index, element){

          if(current_div.attr(element)){
                share_hash[element.split('data-sharrre-')[1]] = true;
            }
      });
    $(this).sharrre({
          share: share_hash
            ,url: $(this).attr('data-sharrre-url')
        });

});

ヘルパーがしなければならないことは、次のような div を作成することだけです。

<div class='sharrre_div' data-sharrre-googlePlus='1' data-sharrre-twitter='1' data-sharrre-url='<%=request.url%>' data-sharrre-facebook='1'></div>

書くのは難しくないはずです:)

于 2012-08-03T02:21:37.840 に答える