Question

IGNORE本部分编辑4是最重要的部分（见下文）

爱聚合物！只是尝试将三个函数调整到我的代码中：

Polymer('my-element', {

// JavaScript for Box (Also Beta)
                unhidePanel: function(panelName) {
                    var panel = this.$.panelName;
                    var hidden = panel.getAttribute('isPanelHidden');

                    if (hidden == "true") {
                        panel.style.display="block";
                        panel.setAttribute('isPanelHidden', "false");
                    }
                    else {
                        panel.style.display="none";
                        panel.setAttribute('isPanelHidden', "true");
                    }
                },

                voteDefPercent: function(val,defid) {
                    var def = this.$.defid;

                    var upvotes = parseInt(def.getAttribute("data-upvotes"),10) + val;
                    var votes = parseInt(def.getAttribute("data-votes"),10) + 1;

                    var percent = Math.round((upvotes / votes) * 100);

                    def.setAttribute('data-upvotes', upvotes);
                    def.setAttribute('data-votes', votes);

                    def.value = percent;
                },

                voteidPercent: function(val,tagid) {
                    var tag = this.$.tagid;

                    var upvotes = parseInt(tag.getAttribute("data-upvotes"),10) + val;
                    var votes = parseInt(tag.getAttribute("data-votes"),10) + 1;

                    var percent = Math.round((upvotes / votes) * 100);

                    tag.style.backgroundSize = percent + "%, 100%, 100%, 100%";

                    tag.setAttribute('data-upvotes', upvotes);
                    tag.setAttribute('data-votes', votes);
                },

                // End JavaScript

});

这些函数最初是JavaScript，有一些变化。代码不适用于这三个中的任何一个，所以我想知道是否存在语法问题或我需要更改的其他事情。是否可以使用onclick: {{ functionName(variableName) }}形式传递变量，或者是否存在某种其他特殊语法？非常感谢!!

编辑1

HTML代码示例：

<button type="button" class="btn btn-default tag-upvote" on-click="voteidPercent(1,'sample-tag-1')"></button>
                                    <button type="button" class="btn btn-default tag-link" id="sample-tag-1" data-upvotes="0" data-votes="0">Official Symbol</button>
                                    <button type="button" class="btn btn-default tag-downvote" on-click="voteidPercent(0,'sample-tag-1')"></button>

编辑2

系统有三个通用功能，许多不同的组件会多次调用它们。我有一种感觉，只有其中一个工作将帮助我自己决定如何解决其余问题。

编辑1中显示的HTML描述了一组按钮。只有中心按钮可见，除非用户将鼠标悬停在它上面，将其分成三个按钮。

三个按钮是:( Upvote按钮）（Link按钮）（Downvote按钮）

根据“upvotes”与“total votes”的百分比，当用户不再悬停在按钮上时，原始中心按钮是唯一剩余的按钮，但红色或绿色百分比会根据百分比而变化赞成票与总票数。

每页大约有50-80个这样的按钮组，因此将每个按钮组作为单个函数传递有点麻烦，但每个按钮组都有一个单独的值。

为了存储/计算百分比，中心按钮有两个属性“data-upvotes”和“data-votes”。此外，每当按下upvote按钮时，它传递参数1（添加到upvote计数）和中心按钮的名称，而downvote按钮传递0（添加到upvote计数）和中心的名称按钮。

我想不出一个有效的方法来做这个没有参数，并迫切需要一些指向正确的方向。非常感谢你，感谢Dirk帮助我做到这一点！

编辑3

我已经给了这几天，我还是迷路了。我目前的HTML示例如下：

<p><button type="button" class="btn btn-default btn-circle" isPanelHidden="true" on-tap="{{ unhidePanel }}" panelName="relational-tags-area-1"><span class="glyphicon glyphicon-play" id="category-button"></span></button></p>

然后是我精致的JavaScript：

unhidePanel: function() {
      var panelName = this.$.getAttribute('panelName');


      var hidden = panel.getAttribute('isPanelHidden');
      console.log(panelName);

      if (hidden == "true") {
           panel.style.display="block";
           panel.setAttribute('isPanelHidden', "false");
      }
      else {
           panel.style.display="none";
           panel.setAttribute('isPanelHidden', "true");
      }
},

我在var panelName = this.$.getAttribute('panelName');

收到“未捕获类型错误：未定义不是函数”

编辑4

忽略我上面所做的一切，我遇到了同一类型的更大问题。有没有办法在Polymer元素中使用JavaScript？我可以沿着这些方向做任何事情：

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
    $(function() {
        var sys = arbor.ParticleSystem(1000, 400, 1);
        sys.parameters({gravity:true});
        sys.renderer = Renderer("#viewport");
        var animals = sys.addNode('Animals',{'color':'red','shape':'dot','label':'Animals'});
    });
</script>

（这使用arbor.js，在此声明之上声明）

如果没有，是否有快速修复或解决方法，不需要重写我的所有代码？非常感谢，不好意思。

Answer 1

如果'not working'意味着你的函数没有被调用，那么确实是因为你的事件声明是错误的（你应该发布HTML代码）。

您无法将参数传递给事件处理程序
事件属性名为on-click

所以你需要写on-click="{{functionName}}"。请参阅Polymer文档中的delcarative event mapping部分。

使JavaScript适应聚合物

1 个答案: