在不使用 Polymer 中的 'this.attributeName' 符号的情况下访问数据绑定属性

Question

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

            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

在不使用 Polymer 中的 'this.attributeName' 符号的情况下访问数据绑定属性

Accessing data bound attributes without using the 'this.attributeName' notation in Polymer

javascript

data-binding

polymer

swal 中没有数据绑定html

访问元素属性

本机事件绑定