带有Riot.js的条件属性

Question

如何使用Riot.js有条件地添加属性？

假设我有以下内容：

<progress max="10" value="{progressValue}"></progress>

这将value属性设置为任意progressValue。但是，在某些情况下，我根本不想添加这个属性。特别是在这个例子中，如果我想要进步元素有一个不确定的状态，我需要完全删除value属性。

我知道，对于某些属性(disabled)，有特殊的处理。它是可配置的吗？

Answer 1

其他答案给出了非理想解。

通常，所有属性都可以通过以布尔属性相同的方式传递假表达式来删除，例如，<div class={ null }></div>将呈现为<div></div>。

但是值属性是特殊的:在表单元素上，不重新使用setAttribute (more info)来设置它们，因此它们是使用不同于泛型属性的特殊绑定表达式来处理的。

这个绑定表达式似乎与虚值有不同的行为，因此前面的示例不起作用。这可能是一个错误，我会更新的答案，当这个行为将被清除。

更新

这个问题已在Riot.js 4.3.7中得到解决。

Answer 2

我知道，对于某些属性(例如禁用)，有特殊的处理。它是可配置的吗？

不，浏览器将像disabled或checked这样的属性计算为真，当属性存在时，它们不需要值，这就是为什么对它们进行特殊处理的原因。

要动态地设置它，您可能不能使用表达式，而是使用this.$() DOM助手来设置属性，例如，在合适的地方做：

if ( <var-to-add-attr> ) {
    this.$('progress').setAttribute('value', progress);
}

if ( <var-to-remove-attr> ) {
    this.$('progress').removeAttribute('value')
}

虽然还没有经过测试，但这个方向上的一些东西可能会起作用。

Answer 3

在riot.js上，我更喜欢使用if或显示属性：

使用show创建标记组件，或者如果：

<progress>
    <div show={ opts.loading }>
        your HTML here
    </div>
</progress>

使用if：

<progress>
    <div if={ opts.loading }>
        your HTML here
    </div>
</progress>

您可以这样调用您的组件：

<progress loading={ this.loading }></progress>

<script>
    this.loading = true // add your code logic here
    this.update()
</script>

不要担心删除that属性，当您执行this.update()时，如果值为false，则riot.js将为您执行此操作。

编辑

如果您使用的是Riot.js >= 4.0，则使用道具代替选择