github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 09:42:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Correctly render data- attributes in widget hbs templates (#10376)

Browse Source 
In virtualdom, element 'properties' are not completely synonymous with element 'attributes'. In particular, `data-` properties will not be rendered as attributes. To ensure all attributes are passed through, we need to include them under an `attributes` key. For more info, see https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#custom-attributes-data-
This commit is contained in:
David Taylor 2020-08-06 14:33:09 +01:00 committed by GitHub
parent e6c508f690
commit 8c03868808
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lib/javascripts/widget-hbs-compiler.js
View File

@ -178,20 +178,27 @@ class Compiler {
if (node.attributes.length) {
let attributes = [];
let properties = [];
node.attributes.forEach(a => {
const name = a.name === "class" ? "className" : a.name;
if (a.value.type === "MustacheStatement") {
attributes.push(
`"${name}":${mustacheValue(a.value, this.state)}`
);
const name = a.name;
const value =
a.value.type === "MustacheStatement"
? mustacheValue(a.value, this.state)
: `"${a.value.chars}"`;
if (a.name === "class") {
properties.push(`"className":${value}`);
} else {
attributes.push(`"${name}":"${a.value.chars}"`);
attributes.push(`"${name}":${value}`);
}
});
const attrString = `{${attributes.join(", ")}}`;
properties.push(`"attributes":{${attributes.join(", ")}}`);
const propertiesString = `{${properties.join(", ")}}`;
instructions.push(
`${parentAcc}.push(virtualDom.h('${node.tag}', ${attrString}, ${innerAcc}));`
`${parentAcc}.push(virtualDom.h('${node.tag}', ${propertiesString}, ${innerAcc}));`
);
} else {
instructions.push(

14
test/javascripts/widgets/widget-test.js
View File

@ -58,6 +58,20 @@ widgetTest("hbs template - with tagName", {
}
});
widgetTest("hbs template - with data attributes", {
template: `{{mount-widget widget="hbs-test" args=args}}`,
beforeEach() {
createWidget("hbs-test", {
template: hbs`<div class='mydiv' data-my-test='hello world'></div>`
});
},
test(assert) {
assert.equal(find("div.mydiv").data("my-test"), "hello world");
}
});
widgetTest("buildClasses", {
template: `{{mount-widget widget="classname-test" args=args}}`,