Javascript 聚合物更新数据表

我正在做一个有一些要求的聚合物元件。我有一个列表（ul）和两个输入字段。我需要其中一个输入更新我的列表（这里没有问题）。另一个输入应该能够为第一个输入定义一些默认值，这里我使用的是数据列表

我把所有的东西都包在一个高分子元件里。那是我开始有问题的时候。我试图更新聚合元素内的数据列表，数据列表已更新，但输入未显示新提示

另外，我注意到，如果我有多个元素，那么所有输入都与第一个元素的数据列表绑定。我不理解这种行为。每个元素必须绑定到其范围内的列表

我还需要弄清楚的一件事是如何删除一些添加的默认值

这是我的密码：

    <dom-module id="test-input" attributes="edit list type">

    <template>
        <!-- Here I have the first input that creates a list and I need to be binded with a datalist-->

        <div id="container">
            <div id="display" on-click="_openEdit">
                <div id="textDescription" class="textDescription">{{description}}</div>
                <ul id="list" class="list"></ul>

                <form id="addContainer" class="addContainer" action="#" method="post">
                    <label for="newitem">{{label}}</label>
                    <!--<input type="text" name="newitem" id="newitem" placeholder="{{placeholder}}" required>-->

                    <input list="defaultValues" name="newitem" id="newitem" placeholder="{{placeholder}}" required>
                    <!-- I've added this options so we can see that it's working but when the datalist is updated it doesn't show-->
                    <datalist id="defaultValues">
                        <option value="option added on html"></option>
                        <option value="option added on html 2"></option>

                    </datalist>
                    <input type="submit" id="addToList" value={{buttonText}}>
                </form>


            </div>

            <!-- Here I have the second input that updates the datalist default values-->

            <div id="edit">
                <div id="extendedList">
                    <div>Enter the default values</div>

                    <form id="extendedAddContainer" class="addContainer" action="#" method="post">
                        <label for="extendedNewitem">{{label}}</label>
                        <input type="text" name="extendedNewitem" id="extendedNewitem"
                               placeholder="enter default values" required>
                        <input type="submit" id="extendedAddToList" value={{buttonText}}>
                    </form>

                </div>


            </div>
        </div>


    </template>


    <script>
        defaultValueCounter = 0;

        function isEmpty(str) {
            return !str.replace(/^\s+/g, '').length; // boolean (`true` if field is empty)
        }


        Polymer({
            is: "test-input",
            properties: {
                buttonText: {
                    type: String,
                    value: "Add"
                }
            },
            ready: function () {
                /* Start: add input to list */
                var list = this.$.list,
                        field = this.$.newitem,
                        form = this.$.addContainer;

                form.addEventListener('submit', function (ev) {
                    if (field.validity.valid && !isEmpty(field.value)) {
                        list.innerHTML += '<li class="style-scope list-input">' + field.value + '</li>';
                        field.value = '';
                        field.focus();
                        ev.preventDefault();
                    }

                }, false);

                list.addEventListener('click', function (ev) {
                    var t = ev.target;
                    if (t.tagName === 'LI') {
                        t.parentNode.removeChild(t);

                    }

                    ev.preventDefault();
                }, false);

                /* End: add input to list */

                /* Start: Add default values */
                var extendedList = this.$.defaultValues,
                        extendedField = this.$.extendedNewitem,
                        extendedForm = this.$.extendedAddContainer,
                        container = this.$.extendedList,
                        defaultList = this.$.defaultList;


                extendedForm.addEventListener('submit', function (ev) {
                    ev.preventDefault();
/* Here I add things to the datalist */
                    if (extendedField.validity.valid && !isEmpty(extendedField.value)) {
                        aux = document.createElement("option");
                        aux.value = extendedField.value;
                        extendedList.appendChild(aux);
                        extendedField.value = '';
                        extendedField.focus();
                    }

                }, false);


            }
            /* End: Add default values */

        });


    </script>

</dom-module>

{{description}}

{{label}}
输入默认值
{{label}}
defaultValueCounter=0；
函数isEmpty（str）{
return！str.replace（//^\s+/g'）.length；//布尔值（`true`如果字段为空）
}
聚合物({
是：“测试输入”，
特性：{
按钮文字：{
类型：字符串，
值：“添加”
}
},
就绪：函数（）{
/*开始：将输入添加到列表*/
var list=此.$.list，
字段=此。$.newitem，
表单=此$.addContainer；
表单.addEventListener（'submit'，函数（ev）{
if（field.validity.valid&&！isEmpty（field.value））{
list.innerHTML+='
'+field.value+'
'；
field.value=''；
field.focus（）；
ev.preventDefault（）；
}
}，假）；
list.addEventListener（'click'，函数（ev）{
var t=电动汽车目标；
如果（t.tagName=='LI'）{
t、 parentNode.removeChild（t）；
}
ev.preventDefault（）；
}，假）；
/*结束：将输入添加到列表*/
/*开始：添加默认值*/
var extendedList=this.$.defaultValues，
extendedField=this.$.extendedNewitem，
extendedForm=this.$.extendedAddContainer，
container=this.$.extendedList，
defaultList=此。$.defaultList；
extendedForm.addEventListener（'submit'，函数（ev）{
ev.preventDefault（）；
/*在这里，我将一些东西添加到数据列表中*/
if（extendedField.validity.valid&&！isEmpty（extendedField.value））{
aux=document.createElement（“选项”）；
aux.value=extendedField.value；
extendedList.appendChild（aux）；
extendedField.value=''；
extendedField.focus（）；
}
}，假）；
}
/*结束：添加默认值*/
});

提前谢谢