Question

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

假设我有以下内容：

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

这会将value属性设置为progressValue。但是，在某些情况下，我根本不想添加此属性。特别是在此示例中，如果我希望progress元素具有不确定的状态，则需要完全删除value属性。

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

Answer 1

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

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

但是值属性是特殊的：在表单元素上，不建议使用<div></div>（more info）来设置它们，因此，它们使用与通用属性不同的临时绑定表达式来处理属性。
该绑定表达式似乎与falsy值具有不同的行为，因此前面的示例不起作用。可能是一个错误，当这种现象消失后，我将更新答案。

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

中修复

Answer 2

我知道对于某些属性（例如禁用），需要进行特殊处理。可以以某种方式配置吗？

否，当仅存在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 3

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

使用show或以下条件创建标签组件：

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

不用担心删除加载属性，当您执行此操作时。update（）如果值是false，riot.js会为您完成。

编辑

如果您使用Riot.js> = 4.0，请使用props代替opts

Riot.js的条件属性

3 个答案: