Riot.js 的条件属性

Question

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

假设我有以下内容：

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

这会将 value 属性设置为 progressValue 的任何值。但是，可能存在我根本不想添加此属性的情况。特别是在此示例中，如果我希望进度元素具有不确定状态，我需要完全删除 value 属性。

我知道对于某些属性（such as disabled），有特殊处理。它可以以某种方式配置吗？

Answer 1

I know that for some attributes (such as disabled), there is special handling. Is it configurable somehow?

不，像 disabled 或 checked 这样的属性在只有属性存在时被浏览器评估为 true，它们不需要值，这就是为什么要对它们进行特殊处理。

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

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

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

虽然未经测试的东西在那个方向可能会奏效。

Answer 2

在 riot.js 我更喜欢使用 if 或 show attributes:

使用 show 或 if 创建您的标签组件：

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

使用如果：

<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>

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

编辑

如果您使用 Riot.js >= 4.0，请使用 props 而不是 opts

Answer 3

其他答案给出了不理想的解决方案。

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

但是 values 属性是特殊的：在表单元素上，不建议使用 setAttribute () 设置它们，因此使用不同于通用属性。
这个绑定表达式似乎对假值有不同的行为，所以前面的例子不起作用。这可能是一个错误，我会在清除此行为时更新答案。

更新:
该问题已在 Riot.js 4.3.7

中修复

Riot.js 的条件属性

Conditional attribute with Riot.js

riot.js