聚合物更新datalist

Question

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

我用聚合物元素包裹。那是我开始遇到问题的时候。我正在尝试更新聚合物元素内的datalist，数据列表已更新，但输入未显示新提示。

另外，我注意到如果我有多个这些元素，则所有输入都与第一个元素的datalist绑定。我不明白这种行为。每个元素必须绑定到她的范围内的列表。

我需要弄清楚的另一件事是如何删除一些默认值。

这是我的代码：

    <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>

提前致谢！