Polymer 1.x：在dom repeat中应用iron媒体查询来确定屏幕宽度_Polymer_Polymer 1.0_Jsbin_Polymer 1.x_Dom Repeat

Polymer 1.x：在dom repeat中应用iron媒体查询来确定屏幕宽度

polymer

Polymer 1.x：在dom repeat中应用iron媒体查询来确定屏幕宽度,polymer,polymer-1.0,jsbin,polymer-1.x,dom-repeat,Polymer,Polymer 1.0,Jsbin,Polymer 1.x,Dom Repeat,我想计算屏幕宽度，并将结果分配给一个介于0和3之间的数字。我正在尝试使用iron media query来执行此操作我希望看到（登录到控制台）其中一个查询返回值true，另外三个返回值false。但是，它们都返回未定义的值我做错了什么仅供参考，解决此问题后，我计划在queryResult（）方法中添加一个条件，以在queryMatches为true时存储索引的值例如 http://jsbin.com/kamusivebi/1/edit?html，控制台，输出 <!doctype h

我想计算屏幕宽度，并将结果分配给一个介于0和3之间的数字。我正在尝试使用

iron media query

来执行此操作

我希望看到（登录到控制台）其中一个查询返回值

true

，另外三个返回值

false

。但是，它们都返回

未定义的值

我做错了什么

仅供参考，解决此问题后，我计划在

queryResult（）

方法中添加一个条件，以在

queryMatches

为

true

时存储

索引的值
例如
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>


{{queryResult（index）}
（功能（）{
聚合物({
是：“x元素”，
特性：{
查询匹配：布尔，
查询：{
类型：对象，
值：函数（）{
返回[
“（最大宽度：699px）”，
'（最小宽度：700px）和（最大宽度：899px）'，
“（最小宽度：900px）和（最大宽度：1124px）”，
“（最小宽度：1125px）”，
];
},
},
},
查询结果：函数（索引）{
此.set（'mediaWidth'，索引）；
log（'mediaWidth'，this.mediaWidth）；
log（'queryMatches'，this.queryMatches）；
},
});
})();
两个问题：
您将每个iron媒体查询的结果
错误地绑定到单个queryMatches
属性，因此每次迭代都会覆盖上一次迭代的结果。要更正此问题，可以绑定到项
迭代器的子属性（例如，项.queryMatches
），这需要将查询的类型
从字符串
数组更改为对象
数组。然后，您可以将item.queryMatches
传递到queryResult（）

您的演示缺少
的HTML导入，因此查询匹配将始终是未定义的

下面是一个带有更正的演示：


[[queryResult（索引，item.queryMatches）]]
[[item.q]]：[[item.queryMatches]]
HTMLImports.whenReady（函数（）{
聚合物({
是‘x元素’，
特性：{
查询：{
类型：对象，
值：函数（）{
返回[
{q:'（最大宽度：699px）}，
{q:'（最小宽度：700px）和（最大宽度：899px）}，
{q:'（最小宽度：900px）和（最大宽度：1124px）}，
{q:'（最小宽度：1125px）}，
];
},
},
},
查询结果：函数（索引、查询匹配）{
log（'index'，index'，queryMatches'，queryMatches）；
}
});
});
两个问题：
您将每个iron媒体查询的结果
错误地绑定到单个queryMatches
属性，因此每次迭代都会覆盖上一次迭代的结果。要更正此问题，可以绑定到项
迭代器的子属性（例如，项.queryMatches
），这需要将查询的类型
从字符串
数组更改为对象
数组。然后，您可以将item.queryMatches
传递到queryResult（）

您的演示缺少
的HTML导入，因此查询匹配将始终是未定义的

下面是一个带有更正的演示：


[[queryResult（索引，item.queryMatches）]]
[[item.q]]：[[item.queryMatches]]
HTMLImports.whenReady（函数（）{
聚合物({
是‘x元素’，
特性：{
查询：{
类型：对象，
值：函数（）{
返回[
{q:'（最大宽度：699px）}，
{q:'（最小宽度：700px）和（最大宽度：899px）}，
{q:'（最小宽度：900px）和（最大宽度：1124px）}，
{q:'（最小宽度：1125px）}，
];
},
},
},
查询结果：函数（索引、查询匹配）{
log（'index'，index'，queryMatches'，queryMatches）；
}
});
});
您链接的jsbin与此问题无关。也许你想链接到快照。链接已更正。谢谢。你链接的jsbin与这个问题无关。也许你想链接到快照。链接已更正。谢谢
<!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>