Widget Helper stripping attributes?

开发
1

I was trying my hand at my first plugin, and to a certain extent it worked quite OK :slight_smile:

However, I’m having trouble with the helper class. The class seems to strip out certain attributes and I have no idea what’s happening.

I’m adding an \<a> with some classes and a few attributes.

I’m trying to add

  • id
  • href
  • title
  • aria-label
  • _target

The first three work fine, the last two don’t.

I’ve tried to reorder and rename the attributes. But it seems there is some sort of selection happening?

Snippet:

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'aria-label': 'my label',
                '_target': "_blank"
            }, [
                h('i.fa.fa-info.d-icon', {
                    'aria-hidden': 'true'
                })
            ]
        ),
    ]);
});

Rendered as

45
451524×208 31.7 KB

2

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104

As per above code, I guess it should be like below

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'attributes': {
                    'aria-label': 'my label',
                    'target': "_blank"
                }
            }, [
                h('i.fa.fa-info.d-icon', { 'attributes': {
                    'aria-hidden': 'true'
                }})
            ]
        ),
    ]);
});

Also target is not _target.

4 个赞
3

Works like a charm, thanks! :slight_smile:

4

借助此主题，我能够使用 h 辅助函数创建一个 SVG 对象：

    let logo = h("svg", {
        "attributes": {
          "width": "22",
          "height": "24",
          "viewBox": "0 0 22 24",
          "fill": "none",
          "xmlns": "http://www.w3.org/2000/svg"
        }
      },
      h("path", {
        "attributes": {
          "d": "M11.5992 4.29387L15.4141 ... 0V4.29387Z",
          "fill": "#000000"
        }
      })
    );

但是，我发现 viewBox() 属性始终以全小写形式渲染。
SVG 图像是使用所有定义的属性 () 生成的，但在页面上未呈现。我错过了什么？

我意识到这是由 virtual-dom 包提供的，但我在那里找不到解决方案。

2 个赞
5

有趣的……你能链接/粘贴生成的 SVG 吗？

1 个赞
7

@Bas 不幸的是，我不再拥有相同的代码了。我已经向前推进，并通过不同的方法实现了 logo。

但我现在可以告诉你的是；如果我在浏览器中检查 SVG 图像，并在浏览器中将其编辑为 HTML，将 viewbox 属性重命名为 viewBox，SVG 图像将在浏览器中正确呈现。

它将与我分解为 h 辅助函数的原始 SVG 图像完全相同。

1 个赞
8

好的，感谢告知。很高兴您能用其他方法解决！

2 个赞
9

此主题在上次回复后 30 天自动关闭。不再允许回复。