Polymer 1.x：在 dom 内应用 iron-media-query -repeat 以确定屏幕宽度

Question

我想计算屏幕宽度并将该结果分配给一个介于 0 和 3 之间的数字，例如。我正在尝试使用 iron-media-query 来执行此操作。

我希望看到（记录到控制台）其中一个查询 return 的值为 true，另外三个为 return false。但是，他们都return一个undefined的值。

我做错了什么？

仅供参考，解决这个问题后，我打算在queryResult()方法中添加一个条件，以在queryMatches为true时存储index的值。

例如

queryResult: function() {
  ...
  if(this.queryMatches) {
    this.set('mediaWidth', index);
  }
  ...
}

http://jsbin.com/kamusivebi/1/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

  <template is="dom-repeat"
            id="page"
            items="[[queries]]"
            >
    <iron-media-query id="query"
                      full
                      query="[[item]]"
                      query-matches="{{queryMatches}}"
                      >
      <span hidden>{{queryResult(index)}}</span>
    </iron-media-query>
  </template>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        queryMatches: Boolean,
        queries: {
          type: Object,
          value: function() {
            return [
              '(max-width:  699px)'                         ,
              '(min-width:  700px) AND (max-width:  899px)' ,
              '(min-width:  900px) AND (max-width: 1124px)' ,
              '(min-width: 1125px)'                         ,
            ];
          },
        },
      },
      queryResult: function(index) {
        this.set('mediaWidth', index);
        console.log('mediaWidth', this.mediaWidth);
        console.log('queryMatches', this.queryMatches);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

两个问题：

您错误地将每个 iron-media-query 的结果绑定到单个 queryMatches 属性，因此每次迭代都会覆盖前一次迭代的结果。要更正此问题，您可以绑定到 item 迭代器的子属性（例如，item.queryMatches），这需要将 queries 的类型从 String 数组转换为 Object 数组。然后，您可以将 item.queryMatches 传递给 queryResult()。
您的演示缺少 <iron-media-query> 的 HTML 导入，因此 queryMatches 将始终是 undefined.

这是一个包含更正的演示：

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/polymer+:1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-media-query/iron-media-query.html" rel="import">
</head>
<body>
  <dom-module id="x-element">
    <template>
      <template is="dom-repeat"
                id="page"
                items="[[queries]]"
                >
        <iron-media-query id="query"
                          full
                          query="[[item.q]]"
                          query-matches="{{item.queryMatches}}"
                          >
        </iron-media-query>
        <span hidden>[[queryResult(index, item.queryMatches)]]</span>
        <div>[[item.q]]: [[item.queryMatches]]</div>
      </template>
    </template>

    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-element',
          properties: {
            queries: {
              type: Object,
              value: function() {
                return [
                  { q: '(max-width:  699px)'                         },
                  { q: '(min-width:  700px) AND (max-width:  899px)' },
                  { q: '(min-width:  900px) AND (max-width: 1124px)' },
                  { q: '(min-width: 1125px)'                         },
                ];
              },
            },
          },
          queryResult: function(index, queryMatches) {
            console.log('index', index, 'queryMatches', queryMatches);
          }
        });
      });
    </script>

  </dom-module>

  <x-element></x-element>

</body>

codepen

Polymer 1.x：在 dom 内应用 iron-media-query -repeat 以确定屏幕宽度

Polymer 1.x: Applying iron-media-query inside dom-repeat to determine screen width

jsbin

polymer

polymer-1.0

polymer-1.x

dom-repeat