Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jdom parsing fails when setting attribute name using a variable #17

Open
micuat opened this issue Oct 31, 2021 · 0 comments
Open

jdom parsing fails when setting attribute name using a variable #17

micuat opened this issue Oct 31, 2021 · 0 comments

Comments

@micuat
Copy link

micuat commented Oct 31, 2021

first of all thanks for the amazing framework!

I found that jdom parsing fails when I try to set an attribute name using a variable:

class Button extends Torus.StyledComponent {
  init(on, msg) {
    this.on = on;
    this.msg = msg;
  }
  // OK
  compose() {
    return jdom`
    <button disabled=${!this.on}>${this.msg}</button>
    `;
  }
  // NG
  // compose() {
  //   return jdom`
  //   <button ${this.on ? null : "disabled"}>${this.msg}</button>
  //   `;
  // }
  // OK
  // compose() {
  //   return {
  //     tag: "button",
  //     attrs: {
  //       disabled: !this.on
  //     },
  //     children: [this.msg]
  //   }
  // }
}

class App extends Torus.StyledComponent {
  init() {
    this.b0 = new Button(true, "enabled");
    this.b1 = new Button(false, "disabled");
  }
  compose() {
    return jdom`
    <div>
    ${this.b0.node}
    ${this.b1.node}
    </div>
    `;
  }
}
const app = new App;

document.getElementById("app").appendChild(app.node);

https://codepen.io/naotohieda/pen/RwZLVvj

It seems neither <button ${keyName}> nor <button ${keyName}=${value}> works. As long as <button key=${value}> works, it's no problem for me (I don't see it as a bug), but I thought it may be good to mention in the doc. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant