q-import { wiki-common.qhtml }
wiki-shell {
sectionKey: "inline-expressions"
pathPrefix: ""
pageTitle: "Inline Expressions"
pageIntro: "Inline expressions are the string interpolation tool in QHTML. They are for text and attribute strings, not for creating keywords or tag names."
main {
wiki-example-card {
title: "Works in rendered text and attributes"
summary: "Use placeholder expressions inside text strings and attribute strings."
note: "It is string interpolation, not a standalone watcher."
details {
html {
div {
title: "Current user: ${window.currentUser}"
text { Hello ${window.currentUser} }
}
q-component user-card {
q-property name: "Guest"
h3 { text { ${this.component.name} } }
}
}
}
}
wiki-example-card {
title: "Macro slot placeholders"
summary: "Inside q-macro returns, placeholders can reference the incoming slot names."
note: "This is a scoped convenience. The name comes from the macro call."
details {
html {
q-macro badge {
slot { label }
return { span { text { ${label} } } }
}
}
}
}
wiki-example-card {
title: "Cannot create keyword-level symbols"
summary: "Do not try to use placeholder expressions for tag names, component names, or keyword names."
note: "Interpolation happens too late for keyword-level grammar."
details {
html {
q-component ${dynamicName} { } // invalid
q-keyword ${alias} { q-component } // invalid
${tagName} { text { hi } } // invalid
}
}
}
wiki-example-card {
title: "Deprecated alias: q-bind"
summary: "q-bind is still accepted, but it maps to q-script. New code should use q-script."
note: "The wiki includes it so you can read older examples without confusion."
details {
html {
q-component counter-label {
q-property label: q-bind { return "Count: " + window.count; }
div { text { ${this.component.label} } }
}
}
}
}
wiki-example-card {
title: "q-keyword scoped aliasing"
summary: "q-keyword gives a new local name to an existing keyword head inside the current scope."
note: "Aliases are local to the block where you define them."
details {
html {
q-keyword component { q-component }
component card-box {
div { text { hello } }
}
div {
q-keyword box { span }
box { text { inside } }
}
box { text { outside } } // unchanged outside the scope
}
}
}
}
}