Javascript 使用聚合物使项目滑回0

我想让我的元素回到它的来源。 拖动存储了它已经移动了多远，所以我想我可以告诉它每次回到0.1像素。 但是，这不起作用（它由touchend触发）。当我查看dev工具时，我看到{drag}}值是正确的，但是if语句没有被触发

任何帮助都将不胜感激

function bounceToZero() {
    if({{drag}} != 0) {
        document.querySelector('pull-to-action').drag = {{drag}} - 1;
        if({{drag}} != 0) {
            setTimeout('bounceToZero()',1000);
        }
    }
}

谢谢你的帮助

编辑： 这是完整的元素

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html">
<polymer-element attributes="action distance container color" name="pull-to-action">
  <template>
    <style>
    :host {
      display: block;
      position: absolute;
      width: calc(100% - 8px);
      text-align:center;
      z-index:99;
    }
    .refreshIcon {
      background-color:white;
      border-radius: 50%;
      border: 1px solid {{color}};
      padding: 8px;
      top: calc(({{drag}}px - 50px) / 3);
      color: {{color}};
      opacity: calc({{drag}} / {{distance}});
      transform: rotate({{drag}}deg);
      filter: grayscale({{desat}}%);
      -webkit-filter: grayscale({{desat}}%);
    }
    </style>
        <span flex><core-icon class="refreshIcon" icon="icons:refresh"></core-icon></span>
        <script>
        window.addEventListener('load', function() {
            var dragObs = 0;
            var lastTouchY = 0;
            var startTouchY = 0;
            var endTouchY = 0;
            var desat = 100;
            var touchstartHandler = function(e) {
                if (e.touches.length != 1) return;
                lastTouchY = e.touches[0].clientY;
                startTouchY = e.touches[0].clientY;
                document.querySelector('pull-to-action').width = window.innerWidth;
            }
            var touchmoveHandler = function(e) {
                var touchY = e.touches[0].clientY;
                var touchYDelta = touchY - lastTouchY;
                lastTouchY = touchY;
                endTouchY = e.touches[0].clientY;
                if (document.getElementById('{{container}}').scrollTop == 0) {
                    dragObs = endTouchY - startTouchY;
                    desat = 100 - ((dragObs / {{distance}}) * 100);
                    document.querySelector('pull-to-action').desat = desat;
                    document.querySelector('pull-to-action').drag = endTouchY - startTouchY;
                }
                if (document.getElementById('{{container}}').scrollTop == 0 && touchYDelta > 0) {
                    e.preventDefault();
                    return;
                }
                if (document.getElementById('{{container}}').scrollTop == 0 &&dragObs > 0) {
                    e.preventDefault();
                    return;
                }
            } 
            var touchendHandler = function(e) {
                if (document.getElementById('{{container}}').scrollTop == 0 && endTouchY - startTouchY >= {{distance}}) {
                    {{action}};
                    document.querySelector('pull-to-action').drag = {{distance}};
                    dragObs = {{distance}}
                    setTimeout('bounceToZero()',2000);
                } else {
                    function bounceToZero() {
                        if({{drag}} != 0) {
                            document.querySelector('pull-to-action').drag = {{drag}} - 1;
                            if({{drag}} != 0) {
                                setTimeout('bounceToZero()',1000);
                            }
                        }
                    }
                }
            }
            document.addEventListener('touchstart', touchstartHandler, false);
            document.addEventListener('touchmove', touchmoveHandler, false);
            document.addEventListener('touchend', touchendHandler, false);
        });
        </script>
    </template>
    <script>
        Polymer({
            action: 'alert("You need to set the action attribute")',
            distance: '100',
            container: 'body',
            drag: '0',
            desat: '100',
            color: '#ccc'
        });
    </script>
</polymer-element>

：主持人{
显示：块；
位置：绝对位置；
宽度：计算（100%-8px）；
文本对齐：居中；
z指数：99；
}
.刷新图标{
背景色：白色；
边界半径：50%；
边框：1px实心{{color}}；
填充：8px；
顶部：calc（{{drag}px-50px）/3）；
颜色：{{color}}；
不透明度：计算（{drag}}/{{distance}}）；
变换：旋转（{drag}}}deg）；
过滤器：灰度（{desat}}%）；
-webkit过滤器：灰度（{{desat}}%）；
}
addEventListener（'load'，function（））{
var-dragObs=0；
var lastTouchY=0；
var startTouchY=0；
var-endTouchY=0；
var desat=100；
var touchstartHandler=函数（e）{
如果（e.touchs.length！=1）返回；
lastTouchY=e.Touchs[0]。客户端；
StartTouch=e.Touchs[0]。客户端；
document.querySelector（'pull-to-action'）.width=window.innerWidth；
}
var touchmoveHandler=函数（e）{
var touchY=e.touchs[0].clientY；
var touchYDelta=touchY-lastTouchY；
lastTouchY=touchY；
endTouchY=e.touchs[0].clientY；
if（document.getElementById（'{container}'）.scrollTop==0）{
dragObs=endTouchY-startTouchY；
desat=100-（（dragObs/{{distance}}）*100）；
document.querySelector（'pull-to-action'）。desat=desat；
document.querySelector（'pull-to-action'）。drag=endTouchY-startTouchY；
}
if（document.getElementById（'{container}}'）.scrollTop==0&&touchYDelta>0）{
e、 预防默认值（）；
返回；
}
if（document.getElementById（'{container}'）.scrollTop==0&&dragObs>0）{
e、 预防默认值（）；
返回；
}
} 
var touchendHandler=函数（e）{
if（document.getElementById（'{container}'）.scrollTop==0&&endTouchY-startTouchY>={{distance}}）{
{{action}}；
document.querySelector（'pull-to-action'）。drag={{distance}；
dragObs={{distance}
setTimeout（'bounceToZero（）'，2000）；
}否则{
函数bounceToZero（）{
如果（{{drag}}！=0）{
document.querySelector（'pull-to-action'）。drag={{drag}-1；
如果（{{drag}}！=0）{
setTimeout（'bounceToZero（）'，1000）；
}
}
}
}
}
document.addEventListener（'touchstart'，touchstartHandler，false）；
document.addEventListener（'touchmove'，touchmoveHandler，false）；
document.addEventListener（'touchend'，touchendHandler，false）；
});
聚合物({
操作：“警报（“您需要设置操作属性”），
距离：“100”，
容器：'主体'，
拖动：“0”，
德萨特：“100”，
颜色：“#ccc”
});

我认为您不能在脚本中使用模板

function bounceToZero() {
  if(drag != 0) {
      document.querySelector('pull-to-action').drag = drag - 1;
      if(drag != 0) {
          setTimeout('bounceToZero()',1000);
      }
  }
}

---

添加

此

上下文以拖动，如果需要

好的，我设法使其工作，下面是我所做的

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html">
<polymer-element attributes="action distance container color" name="pull-to-action">
  <template>
    <style>
    :host {
      display: block;
      position: absolute;
      width: calc(100% - 8px);
      text-align:center;
      z-index:99;
    }
    .refreshIcon {
      background-color:white;
      border-radius: 50%;
      border: 1px solid {{color}};
      padding: 8px;
      top: calc(({{drag}}px - 50px) / 3);
      color: {{color}};
      opacity: calc({{drag}} / {{distance}});
      transform: rotate({{drag}}deg);
      filter: grayscale({{desat}}%);
      -webkit-filter: grayscale({{desat}}%);
    }
    </style>
        <span flex><core-icon class="refreshIcon" icon="icons:refresh"></core-icon></span>
        <script>
        var dragObs = 0;
        function bounceToDistance() {
            if (dragObs > 150) {
                dragObs = dragObs - 3;
                setTimeout('document.querySelector("pull-to-action").drag = dragObs; bounceToDistance();',1);          
            }   
        }
        function bounceToZero() {
            if (dragObs > 0) {
                dragObs--;
                setTimeout('document.querySelector("pull-to-action").drag = dragObs; bounceToZero();',5);          
            }   
        }
        window.addEventListener('load', function() {
            var lastTouchY = 0;
            var startTouchY = 0;
            var endTouchY = 0;
            var desat = 100;
            var touchstartHandler = function(e) {
                if (e.touches.length != 1) return;
                lastTouchY = e.touches[0].clientY;
                startTouchY = e.touches[0].clientY;
                document.querySelector('pull-to-action').width = window.innerWidth;
            }
            var touchmoveHandler = function(e) {
                var touchY = e.touches[0].clientY;
                var touchYDelta = touchY - lastTouchY;
                lastTouchY = touchY;
                endTouchY = e.touches[0].clientY;
                if (document.getElementById('{{container}}').scrollTop == 0) {
                    dragObs = endTouchY - startTouchY;
                    desat = 100 - ((dragObs / {{distance}}) * 100);
                    document.querySelector('pull-to-action').desat = desat;
                    document.querySelector('pull-to-action').drag = endTouchY - startTouchY;
                }
                if (document.getElementById('{{container}}').scrollTop == 0 && touchYDelta > 0) {
                    e.preventDefault();
                    return;
                }
                if (document.getElementById('{{container}}').scrollTop == 0 &&dragObs > 0) {
                    e.preventDefault();
                    return;
                }
            } 
            var touchendHandler = function(e) {
                if (document.getElementById('{{container}}').scrollTop == 0 && endTouchY - startTouchY >= {{distance}}) {
                    {{action}};
                    bounceToDistance();
                    setTimeout('bounceToZero();', 2000);
                } else {
                    bounceToZero();
                }
            }
            document.addEventListener('touchstart', touchstartHandler, false);
            document.addEventListener('touchmove', touchmoveHandler, false);
            document.addEventListener('touchend', touchendHandler, false);
        });
        </script>
    </template>
    <script>
        Polymer({
            action: 'alert("You need to set the action attribute")',
            distance: '100',
            container: 'body',
            drag: '0',
            desat: '100',
            color: '#ccc'
        });
    </script>
</polymer-element>

：主持人{
显示：块；
位置：绝对位置；
宽度：计算（100%-8px）；
文本对齐：居中；
z指数：99；
}
.刷新图标{
背景色：白色；
边界半径：50%；
边框：1px实心{{color}}；
填充：8px；
顶部：calc（{{drag}px-50px）/3）；
颜色：{{color}}；
不透明度：计算（{drag}}/{{distance}}）；
变换：旋转（{drag}}}deg）；
过滤器：灰度（{desat}}%）；
-webkit过滤器：灰度（{{desat}}%）；
}
var-dragObs=0；
函数bounceToDistance（）{
如果（Dragbs>150）{
dragObs=dragObs-3；
setTimeout（'document.querySelector（“pull to action”）.drag=dragObs；bounceToDistance（）；'，1）；
}   
}
函数bounceToZero（）{
如果（Dragbs>0）{
拉戈布——；
setTimeout（'document.querySelector（“pull to action”）.drag=dragObs；bounceToZero（）；'，5）；
}   
}
addEventListener（'load'，function（））{
var lastTouchY=0；
var startTouchY=0；
var-endTouchY=0；
var desat=100；
var touchstartHandler=函数（e）{
如果（e.touchs.length！=1）返回；
lastTouchY=e.Touchs[0]。客户端；
StartTouch=e.Touchs[0]。客户端；
document.querySelector（'pull-to-action'）.width=window.innerWidth；
}
var touchmoveHandler=函数（e）{
var touchY=e.touchs[0].clientY；
var touchYDelta=touchY-lastTouchY；
lastTouchY=touchY；
endTouchY=e.touchs[0].clientY；
if（document.getElementById（'{container}'）.scrollTop==0）{
dragObs=endTouchY-startTouchY；
desat=100-（（dragOb