将代码移动到 Polymer 组件时遇到问题答案

【问题标题】：Trouble moving code to Polymer component将代码移动到 Polymer 组件时遇到问题
【发布时间】：2017-04-28 15:13:57
【问题描述】：

我正在尝试实现一些空闲检测代码。感谢some other SO 帖子，我让它工作了，但我希望它成为聚合物元素的一部分，所以我可以将<idle-fire></idle-fire> 粘贴在我的应用程序的任何位置并传递一些参数。这是我所拥有的：

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="idle-fire">

<script>
    Polymer({
        is: 'idle-fire',
        properties: {
            idlelimit: {
                type: Number,
                value: 10
            }
        },
        ready: function() {


        }
    });
</script>
</dom-module>

<script>
    var idleTime = 0;
    $(document).ready(function () {
        //Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

        //Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });
    function timerIncrement() {
        idleTime = idleTime + 1;
        console.log("tick (" + idleTime + ")");
        if (idleTime >= 2) { // in minutes
            console.log("Idle event fired!")
        }
    }
</script>

如果我尝试将 <script> 标记的任何部分移动到 Polymer ready 函数，它将无法工作。就这样，我无法访问idlelimit 属性。

任何方向表示赞赏。

【问题讨论】：

您是否尝试过将代码保留在 Polymer 的构造函数之外
我应该提到，是的，它有效，但是我无法访问像idlelimit 这样的参数。我会更新问题。
您可以使用document.querySelector('idle-fire').idlelimit 访问它。顺便说一句，您已将 capital V 用于 value。这将不起作用 v 应该小写。

标签： javascript polymer

【解决方案1】：

如果我尝试将 <script> 标记的任何部分移动到 Polymer ready 函数，它将无法工作。就这样，我无法访问idlelimit 属性。

设置回调时，您可能没有正确绑定上下文（即this）。如果您完全忘记这样做，计时器回调的上下文将是外部上下文（Window 对象）而不是您的 Polymer 对象，其中idlelimit 可用。

这是为timerIncrement 回调设置上下文的一种方法：

// in Polymer object
setupTimer: function() {
  setInterval(timerIncrement.bind(this), 1000);
}

或者，您可以使用 ES6 箭头函数为您自动绑定上下文：

// in Polymer object
setupTimer: function() {
  setInterval(() => {
    this.idleTime++; // `this` is Polymer object
  }, 1000);
}

这是该代码到 Polymer 的转换：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'idle-fire',
    properties: {
      idlelimit: {
        type: Number,
        value: 10
      }
    },
    
    attached: function() {
      // Increment the idle time counter every second.
      this._idleInterval = setInterval(this._timerIncrement.bind(this), 1000);
      this._idleTime = 0;

      // Zero the idle timer on mouse movement or keypress.
      document.onmousemove = () => { this._idleTime = 0 };
      document.onkeypress =  () => { this._idleTime = 0 };
    },

    detached: function() {
      clearInterval(this._idleInterval);
    },

    _timerIncrement: function() {
      const idleTime = ++this._idleTime;
      console.log("tick (" + idleTime + ")", this.idlelimit);
      if (idleTime >= this.idlelimit) { // in seconds for this demo
        console.log("Idle event fired!");
        clearInterval(this._idleInterval);
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <div>See timer in DevTools console</div>
  <div>Move your mouse over this document, or press any key to restart the timer</div>
  <idle-fire></idle-fire>
</body>

codepen

仅供参考：您可以考虑使用已经可用的<f-idlejs> 元素。

【讨论】：

感谢idlejs 链接！
@Scott 没问题 :)