模板中的聚合物重复不起作用

时间:2015-01-21 19:13:47

标签: polymer web-component

所以我有一个聚合物元素,它使用带有repeat属性的嵌套模板。但它似乎无法识别传入的JSON对象。



<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">

<polymer-element name="to-do">
    <template>
        <style>
           :host {
               display: block;
               background: white;
               height:400px;
               width: 300px;
               padding: 20px;
           } 
           paper-input {
               width: 70%;
               margin: 10px;
               display: inline-block;
           }
           core-icon {
               margin: 55px 10px 10px 10px;
               display: inline-block;
           }
           paper-checkbox {
               display: block;
               width: 100%;
           }
        </style>
        <paper-input floatingLabel label="Enter a Task"></paper-input> <core-icon icon="add-circle"></core-icon>
        <div class="tasks">
            <template repeat="{{item in tasklist}}">
                <paper-checkbox label="{{item.itemName}}"></paper-checkbox>
            </template>
        </div>
        <core-localstorage name="tasks" value="{{tasklist}}"></core-localstorage>
        
    </template>
    <script>
        Polymer('to-do', {
            tasklist: [
                {
                    itemName : "Study",
                    isDone : true
                },
                {
                    itemName : "Cook Dinner",
                    isDone : false
                }
            ],
            ready: function() {
                console.log(this.tasklist);
            },
            addObject: function() {
                    
            }
        });
    </script>
</polymer-element>
&#13;
&#13;
&#13;

似乎从嵌套模板块中的脚本块中获取tasklist,但将其打印在ready块中。

您可以在此处查看上述代码的运行演示 https://to-do-prateekjadhwani.c9.io/demo.html

由于

***** **** EDIT

因为它使用的是localstorage,它使用了LocalStorage的tasklist中的数据,而不是使用代码迭代更新自己。 所以,我相信这个问题已经解决了。但如果您认为我的推理不正确,请随时添加评论。

提前致谢。

1 个答案:

答案 0 :(得分:0)

因为它使用的是localstorage,它使用了LocalStorage的tasklist中的数据,而不是使用代码迭代更新自己。所以,我相信这个问题已经解决了。