Question

我正在查看Sharre社交mediq jquery插件http://sharrre.com/#以下是如何使用它的示例。

simple_jquery_social.js示例：

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

}）

所以在正常的rails使用中，我会在我的资产目录中添加上面的内容（以及更新的jquery lib东西），在我的视图中添加一个'div id = sharrre'标记，我就完成了。但是我想在我的.html.erb视图模板中使用rails helper函数，并动态决定是否显示google plus。所以我想要这样的东西：

<%= my_helper :googlePlus=>false %>

然后我的环境应该知道上面jquery代码中的googlePlus变量现在是false，因此不会显示googlePlus按钮。 **重点是通过Rails动态控制jquery插件中的更多选项。但要做到这一点，我需要能够通过Rails动态设置jquery变量。我意识到上面的例子是微不足道的，因为我可以手动更改jquery变量，但通过Rails做，我也可以动态设置url param，这是我想要做的事情，所以人们可以推荐特定的页面

实现这一目标的好机制是什么，或者甚至是可能的？

Answer 1

创建一个帮助程序，它将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代码，它将每个元素都带有一个类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>

写起来不应该太难：）

动态/在运行时从Rails视图设置jquery变量？

1 个答案: