在不使用 Polymer 中的“this.attributeName”表示法的情况下访问数据绑定属性

Question

我正在尝试将 sweetalert2 与自定义 html 一起使用，该 html 包含我想要访问的具有数据绑定的聚合物元素，但我无法使用“this.attributeName”表示法获取数据。我认为这是由于在创建警报的元素上方的 DOM 上附加了甜蜜警报，但我可能错了，是否有解决方法？我已经提供了用于创建警报的代码，并且在解决方案中我试图解决这个问题。

            swal({
                title: 'Blah Blah',
                html: 
                '<some-el id="days" chosen-days="{{newCDays}}"></some-el>\
                <time-input id="start" time$="{{newSTime}}" hour12 clamp="seconds"></time-input>\
                <time-input id="end" time$="{{newETime}}" hour12 clamp="seconds"></time-input>',
                confirmButtonText: 'Done',
                preConfirm: function() {
                    return new Promise((resolve, reject) => {
                        resolve({
                            days: document.getElementById('days').getAttribute("chosen-days"),
                            start: document.getElementById('start').value,
                            end: document.getElementById('end').time,
                        });
                    });
                }
            });

Answer 1

swal html 中没有数据绑定

Polymer 数据绑定只能在 Polymer 模板内使用，因此在 swal 的 html 字段中使用该语法会导致将文字值分配给属性。在以下示例中，<paper-input>.value 按字面意思设置为 "{{myValue}}"（包括大括号）。请注意，它不会创建 <paper-input>.myValue。

swal({
  html: '<paper-input no-label-float value="{{myValue}}"></paper-input>'
  ...
})

html 不应包含数据绑定。它应该是这样的：

swal({
  html: '<paper-input no-label-float></paper-input>'
  ...
})

访问元素属性

在preConfirm 函数中，您可以从html 字段中查询元素，并通过名称访问该元素的属性：

swal({
  preConfirm: async () => {
    console.log({
      noLabelFloat: document.getElementById('myInput').noLabelFloat
    });
  }
  ...
})

本机事件绑定

在您的Codepen 中，您表明<input> 是这样使用的：

<input type="text" value$="{{testAttr}}">

根据您在swal 的html 中的绑定，我认为您假设上面的数据绑定会将<x-foo>.testAttr 设置为<input>.value，但这实际上是不正确的。给定一个原生 <input> 元素，你必须使用 Polymer 的 native event-binding syntax：

<input type="text" value="{{testAttr::input}}">

当<input> 引发input 事件时，将<x-foo>.testAttr 设置为<input>.value。相当于：

// in x-foo script
myNativeInput.addEventListener('input', () => {
  this.testAttr = myNativeInput.value;
});

demo