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

Question

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

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

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

如文档所述：

Bindings can only occur in attribute-value and text-content positions.

即：

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

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

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

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

Using a condition for having attributes in a paper-input

lit-html