lit-html - 在纸张输入中使用具有属性的条件

Question

我正在使用带有paper-input聚合物 3 元素的 lit-html。我想创建一个条件，其中某些属性paper-input按条件放入 -attributes 中。

请注意，这似乎与纸张输入无关。使用简单输入会发生不同的错误

render(){
    return html`
                                             <!--Using placeholder or value depending on a condition-->
        <paper-input label="Video title" type="text"
            id="titleInput" name="title" ${((true) ? html`placeholder="${this.videotitle}" `: html`value="${this.videotitle}" `)}>
        </paper-input>
`;}

我期望根据条件设置占位符或值。

/*Error message from console*/
Uncaught (in promise) TypeError: Cannot read property '2' of null
    at _prepareTemplate (template.ts:102)
    at new Template (template.ts:203)
    at Object.templateFactory (shady-render.ts:94)
    at NodePart._commitTemplateResult (parts.ts:285)
    at NodePart.commit (parts.ts:230)
    at render (render.ts:57)
    at Function.render (shady-render.ts:284)
    at HTMLElement.update (lit-element.ts:231)
    at HTMLElement.performUpdate (updating-element.ts:772)
    at HTMLElement._enqueueUpdate (updating-element.ts:717)

使用如下输入字段时：

<input 
${((true) ? html`placeholder="${this.videotitle}" `: html`value="${this.videotitle}"`)} >
</input>

DOM 是这样的： 并且看起来像这样：

我在我相信我遵循的文档中找到了这些相关规则：

• 绑定只能出现在属性值和文本内容位置。

• 模板不应包含未关闭的元素——它们将被 HTML 解析器关闭。参考：https ://lit-html.polymer-project.org

我这样做并不成功。有人知道路吗？我当然可以将它们分开，但我想要一种简洁的方式。

Answer 1

正如文档所说：

绑定只能出现在属性值和文本内容位置。

那是：

<element attribute="${/* Here */}">
  ${/* Or here */}
</element>

尝试根据条件设置每个属性值：

<paper-input placeholder=${condition ? this.videotitle : null}
             value=${condition ? null : this.videotitle}>
</paper-input>