Question

我尝试将数据绑定添加到在JS中创建的元素，但它不起作用。要么代码中的字符串或值保持为空。

el.setAttribute('value', '{{value}}');输入中的内容为“{{value}}”

el.setAttribute('value', value);输入中的内容为空，因为value为空。

如何动态创建元素并使用数据绑定？

Answer 1

动态创建元素是另一个主题，但在这里我尝试动态地将值绑定到现有元素，您可以使用如下：

<sample-elem  data = "{{data}}"></sample-elem> 
...
<script>
    class MyApp Polymer.Element { 

        static get is() { return "jobijoy-app"; } 
        static get properties() { return {
           data: {
               type:String,
               value(): {return "";}
            }

         bindValue() {
             this.set('data','Some data here');
         }

 customElements.define(MyApp.is, MyApp);
 </script>

此时您在data中有一个sample-elem属性，数据值为'此处有些数据'

我不确定但是在这里使用此代码，您可以动态创建sample-elem

ready(){
super.ready();
    var dynamicEl = document.createElement("sample-elem");
    document.body.appendChild(dynamicEl);
}

Answer 2

var dynamicEl = document.createElement("sample-elem");

如果使用createElement创建元素，则可以在追加它之前使用其中任何一个元素。

dynamicEl.value = this.value;                // First way
dynamicEl.setAttribute('value', this.value;  // Second way

this.value调用您尝试以编程方式创建其他元素的元素中设置的属性值。

如何在JS创建的元素中设置数据绑定？

2 个答案: