Polymer “替代方案”；在；迭代对象的表达式（0.5.4）_Polymer_Web Component

Polymer “替代方案”；在；迭代对象的表达式（0.5.4）

polymer

Polymer “替代方案”；在；迭代对象的表达式（0.5.4）,polymer,web-component,Polymer,Web Component,使用repeat和in表达式，在数组上进行迭代是很简单的，但是需要交换 this.data = ["foo","bar"]; 到无法在对象上迭代。我见过使用Object.key获取每个值的示例，但返回的索引是0,1，而不是“foo”“bar” 虽然这个简单的示例不使用双向绑定，但我希望保持对它的支持，以防将来需要它聚合物测试{data.foo}} f{{}} b{{}} 0{{} 1{{}} 2{{}} { （{index}}-{{obj}}）= } 聚合物(

使用repeat和in表达式，在数组上进行迭代是很简单的，但是需要交换

            this.data = ["foo","bar"];

到

无法在对象上迭代。我见过使用Object.key获取每个值的示例，但返回的索引是0,1，而不是“foo”“bar”

虽然这个简单的示例不使用双向绑定，但我希望保持对它的支持，以防将来需要它


聚合物
测试{data.foo}}

f{{}}

b{{}}

0{{}

1{{}}

2{{}}

{
（{index}}-{{obj}}）=
}
聚合物({
就绪：函数（）{
this.data=[“foo”，“bar”]；
//this.data={foo:“football”，bar:“barfly”}
}
});

虽然[目前]还没有内置的对对象进行迭代的功能，但您可以通过过滤器轻松实现此功能：


密钥：{{Key}}
值：{{data[key]}
聚合物({
就绪：函数（）{
//this.data=[“foo”，“bar”]；
this.data={foo:“football”，bar:“barfly”}
}
//用于循环对象的筛选器函数
getKeys:函数（o）{
返回对象。键（o）；
}
});

如果您还有其他问题，请随时提问

Live:

虽然[目前]还没有内置的对对象进行迭代的功能，但您可以使用过滤器轻松实现此功能：


密钥：{{Key}}
值：{{data[key]}
聚合物({
就绪：函数（）{
//this.data=[“foo”，“bar”]；
this.data={foo:“football”，bar:“barfly”}
}
//用于循环对象的筛选器函数
getKeys:函数（o）{
返回对象。键（o）；
}
});

如果您还有其他问题，请随时提问

Live:

虽然[目前]还没有内置的对对象进行迭代的功能，但您可以使用过滤器轻松实现此功能：


密钥：{{Key}}
值：{{data[key]}
聚合物({
就绪：函数（）{
//this.data=[“foo”，“bar”]；
this.data={foo:“football”，bar:“barfly”}
}
//用于循环对象的筛选器函数
getKeys:函数（o）{
返回对象。键（o）；
}
});

如果您还有其他问题，请随时提问

Live:

虽然[目前]还没有内置的对对象进行迭代的功能，但您可以使用过滤器轻松实现此功能：


密钥：{{Key}}
值：{{data[key]}
聚合物({
就绪：函数（）{
//this.data=[“foo”，“bar”]；
this.data={foo:“football”，bar:“barfly”}
}
//用于循环对象的筛选器函数
getKeys:函数（o）{
返回对象。键（o）；
}
});

如果您还有其他问题，请随时提问

Live:

数据更改时会发生什么情况？

重复执行

。我已经添加了一个链接到实时预览。我添加了一个我认为应该重复更改数据的任务。如果不指定它所属的对象，就不能调用

startUpdater

<代码>this.startUpdater（）会起作用。调用

startUpdater

Polymer时，会在全局名称空间中查找函数。@RyanTheLeach我编辑了答案，以包含到修改后的live版本的链接。“至少从供应商到消费者”——在示例中，它们是绝对对称的；当然，反过来也是如此。当数据更改时会发生什么情况？

重复执行

。我已经添加了一个链接到实时预览。我添加了一个我认为应该重复更改数据的任务。如果不指定它所属的对象，就不能调用

startUpdater

<代码>this.startUpdater（）会起作用。调用

startUpdater

重复执行

。我已经添加了一个链接到实时预览。我添加了一个我认为应该重复更改数据的任务。如果不指定它所属的对象，就不能调用

startUpdater

<代码>this.startUpdater（）会起作用。调用

startUpdater

重复执行

。我已经添加了一个链接到实时预览。我添加了一个我认为应该重复更改数据的任务。如果不指定它所属的对象，就不能调用

startUpdater

<代码>this.startUpdater（）会起作用。调用

startUpdater

Polymer时，会在全局名称空间中查找函数。@RyanTheLeach我编辑了答案，以包含到修改后的live版本的链接。“至少从供应商到消费者”——在示例中，它们是绝对对称的；当然，反过来也行。

            this.data = {foo:"football",bar:"barfly"}

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<polymer-element name="an-consumer" attributes="data" noscript>
    <template>testing {{data.foo}}<br>
        <template id="foo">f {{}}<br></template>
        <template id="bar">b {{}}<br></template>
        <template id="0">0 {{}}<br></template>
        <template id="1">1 {{}}<br></template>
        <template id="2">2 {{}}<br></template>
        {
        <template repeat="{{obj,index in data}}" bind="{{data}}">
            ( {{index}} - {{obj}} ) = <template ref="{{index}}" bind="{{obj}}"></template>
        </template>
        }
    </template>
</polymer-element>
<polymer-element name="an-supplier" attributes="data">
    <template></template>
    <script>
    Polymer({
        ready: function(){
            this.data = ["foo","bar"];
            //this.data = {foo:"football",bar:"barfly"}
        }
    });
    </script>
</polymer-element>
<polymer-element name = "an-root" noscript>
    <template>
        <an-supplier data="{{stuff}}"></an-supplier>
        <an-consumer data="{{stuff}}"></an-consumer>
    </template>
</polymer-element>
<an-root>
</an-root>
</body>
</html>

<template repeat="{{key in data | getKeys}}">
  <span>Key: {{key}}</span>
  <span>Value: {{data[key]}}</span>
</template>

<script>
Polymer({
  ready: function(){
    // this.data = ["foo","bar"];
    this.data = {foo:"football",bar:"barfly"}
  }
  // filter function to use in looping objects
  getKeys : function(o) {
    return Object.keys(o);
  }
});
</script>