Question

我想做这样的事情：

<input type="text" value={ value1 } >
<input if={ value1 != ''} type="text">

因此，当第一个输入的值不同于空时，向DOM添加第二个输入。我知道Riot.js不支持双向数据绑定

我尝试过以下操作：

<input ref="first" type="text" >
<input if={ this.refs.first.value != '' } type="text">

但它不起作用。

Answer 1

你是对的，Riot不做双向数据绑定的原因我会留给读者研究。这是令人着迷的东西，但在我看来，通过遵循一些简单的模式，大多数Web开发都可以变得非常简单。由于这个原因，骚乱很棒。简而言之，标记只是标记，可以使用可以更新标记的事件监听器。

<my-tag>
  <input name='username' type='text' onKeyup={ checkVal } value={ opts.val }>
  <input if={ usernameEntered } name='password' type='password'>

  <script>
    this.checkVal = (event) => {
      this.usernameEntered = event.target.value !== ''
      // this.update() is implicitly called in event listeners
    }
  </script>
</my-tag>

在您的情况下（我不知道您的确切用例），您可能希望使用传递给标记（opts.val）的值填充第一个输入元素。然后我们可以在事件监听器（usernameEntered）和checkVal标记中分配一些变量（update）。

有关更详细的示例，请参阅https://groups.google.com/forum/#!topic/protobuf/JWZx9n8CUvw

RIOT.JS：根据输入值显示元素

1 个答案: