如何循环遍历键数组并以声明方式使用 firebase-query 对每个键进行查询?
How can I loop through an array of keys and do query for each using firebase-query in a declarative manner?
如标题所示,我正在尝试使用 firebase-query 元素来查询键数组,在 return 中我应该从每个键中获取一堆 objects询问。这可以在 java 或 swift 中轻松完成,但是当涉及到聚合物元素时,我无法弄清楚。
我试过将 firebase-query 放在 dom-repeat 中,但似乎不起作用。我还尝试更改 equal-to 键,它似乎不会启动对新键的查询。
请参阅下面的代码:
<!doctype html>
<html>
<head>
</head>
<body>
<template is="dom-bind" id="scope">
<!-- .......other code -->
<!-- condKey is from the array I need to loop -->
<!--through and array comes from another query-->
<firebase-query
id="myQuery"
app-name="ProjectName"
order-by-child="childName"
path = "/nodeKey"
equal-to=[[condKey]]
data="{{results}}">
</firebase-query>
<!-- ***data comes from another query -->
<div id="listContainer">
<template is="dom-repeat" items=[[data]] as="item">
<div class="item">
<div class$="{{_computeItems(item.key)}}"></div>
<template is="dom-repeat" items={{results}} as="myresult">
<div>[[myresult.key]]</div>
</template>
</div>
</template>
</div>
<script>
scope._computeItems = function(key) {
console.log("key of query is: " , key);
scope.condKey = key ;
};
</script>
</template>
<!-- .......other code -->
</body>
您将使用 js Promise.all 来实现。你将每个 XHR/.once() 推入一个数组,然后 运行 Promise.all 反对那个。
将值传递给 new-element
,使用模板 is="dom-repeat" 将解决您的问题。
<div id="listContainer">
<template is="dom-repeat" items=[[data]] as="item">
<div class="item">
<div class$="{{_computeItems(item.key)}}"></div>
<template is="dom-repeat" items={{results}}>
<new-element results="{{results}}"></new-elements>
</template>
</div>
</template>
</div>
新元素
<template is="dom-repeat" items={{results}} as="myresult">
<div>[[myresult.key]]</div>
</template>
所以我试图通过使用 Polymer 数据绑定和嵌套子项来实现这一点,每个子项都执行自己的查询以获得所需的内容,那时我还是个菜鸟。以下是如何通过 Polymer 数据绑定以声明方式轻松完成此操作。
<parent-element>
<template is="dom-repeat" items="[[keyArrays]]">
<child-element key="[[item]]"></child-elements>
</template>
</parent-element>
然后在每个子元素中通过子元素定义中的 firebase-query 进行查询:
<dom-module id="child-element">
<template>
....
<firebase-query path="/path/[[key]]" data="{{_queryResult}}></firebase-query>
<element-to-bind-result-with data="[[_queryResult]]"></element-to-bind-result-with>
</template>
....
<dom-module>
希望对大家有所帮助。
如标题所示,我正在尝试使用 firebase-query 元素来查询键数组,在 return 中我应该从每个键中获取一堆 objects询问。这可以在 java 或 swift 中轻松完成,但是当涉及到聚合物元素时,我无法弄清楚。
我试过将 firebase-query 放在 dom-repeat 中,但似乎不起作用。我还尝试更改 equal-to 键,它似乎不会启动对新键的查询。
请参阅下面的代码:
<!doctype html>
<html>
<head>
</head>
<body>
<template is="dom-bind" id="scope">
<!-- .......other code -->
<!-- condKey is from the array I need to loop -->
<!--through and array comes from another query-->
<firebase-query
id="myQuery"
app-name="ProjectName"
order-by-child="childName"
path = "/nodeKey"
equal-to=[[condKey]]
data="{{results}}">
</firebase-query>
<!-- ***data comes from another query -->
<div id="listContainer">
<template is="dom-repeat" items=[[data]] as="item">
<div class="item">
<div class$="{{_computeItems(item.key)}}"></div>
<template is="dom-repeat" items={{results}} as="myresult">
<div>[[myresult.key]]</div>
</template>
</div>
</template>
</div>
<script>
scope._computeItems = function(key) {
console.log("key of query is: " , key);
scope.condKey = key ;
};
</script>
</template>
<!-- .......other code -->
</body>
您将使用 js Promise.all 来实现。你将每个 XHR/.once() 推入一个数组,然后 运行 Promise.all 反对那个。
将值传递给 new-element
,使用模板 is="dom-repeat" 将解决您的问题。
<div id="listContainer">
<template is="dom-repeat" items=[[data]] as="item">
<div class="item">
<div class$="{{_computeItems(item.key)}}"></div>
<template is="dom-repeat" items={{results}}>
<new-element results="{{results}}"></new-elements>
</template>
</div>
</template>
</div>
新元素
<template is="dom-repeat" items={{results}} as="myresult">
<div>[[myresult.key]]</div>
</template>
所以我试图通过使用 Polymer 数据绑定和嵌套子项来实现这一点,每个子项都执行自己的查询以获得所需的内容,那时我还是个菜鸟。以下是如何通过 Polymer 数据绑定以声明方式轻松完成此操作。
<parent-element>
<template is="dom-repeat" items="[[keyArrays]]">
<child-element key="[[item]]"></child-elements>
</template>
</parent-element>
然后在每个子元素中通过子元素定义中的 firebase-query 进行查询:
<dom-module id="child-element">
<template>
....
<firebase-query path="/path/[[key]]" data="{{_queryResult}}></firebase-query>
<element-to-bind-result-with data="[[_queryResult]]"></element-to-bind-result-with>
</template>
....
<dom-module>
希望对大家有所帮助。