首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >从Rails视图中动态/在运行时设置jquery变量?

问从Rails视图中动态/在运行时设置jquery变量?
EN

Stack Overflow用户
提问于 2012-08-03 08:57:40
回答 1查看 386关注 0票数 0

我正在研究Sharre social mediq jquery插件http://sharrre.com/#,下面是一个如何使用它的示例。

simple_jquery_social.js示例:

代码语言:javascript
复制
$('#sharrre').sharrre({
share: {
  googlePlus: true,
   facebook: true,
  twitter: true
 },
url: 'http://sharrre.com'

})

因此,在rails的正常使用中,我会在我的assets目录中添加上述代码(以及sharrre jquery lib ),在我的视图中添加一个'div id=sharrre‘标签,然后就完成了。例如,我想在我的.html.erb视图模板中创建一个rails辅助函数,并动态决定是否显示google plus。所以我想要像这样的东西:

代码语言:javascript
复制
<%= my_helper :googlePlus=>false %>

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

什么是实现这一目标的好机制,或者它甚至是可能的?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-03 10:21:38

创建一个以ID、URL和选项散列作为参数的帮助器。

然后,帮助器生成JS和html的混合,输出JS代码和所需的div。

代码语言:javascript
复制
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代码,该JS代码将使用一个类sharrre_div获取每个元素。对于每一个,它将检查是否存在特定的html数据属性:data-sharrre-googlePlus、data-sharrre-twitter、data-sharrre-url等。此选项在很大程度上依赖于JS

JS :将其封装在body onload事件中

代码语言:javascript
复制
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,如下所示:

代码语言:javascript
复制
<div class='sharrre_div' data-sharrre-googlePlus='1' data-sharrre-twitter='1' data-sharrre-url='<%=request.url%>' data-sharrre-facebook='1'></div>

编写起来应该不会太难:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11787894

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档