Question

我有这个简单的<input>无线电用户选择。

<sample>
  <ul>
    <li each={ techs }>
        <input 
            type='radio' 
            name='dev_choice' 
            value={ name }
            onclick={ check_choice }>
                { name }
        </input>
    </li>
  </ul>

  <button onclick={ check_selection }>Check</button>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML', rank: '10' },
      { name: 'JavaScript', rank: '20' },
      { name: 'CSS', rank: '30' }
    ]

    check_choice(e) {
        // This is working fine
        console.log(e.item.rank)
    }
    check_selection(e) {
        // How do I get the rank of my selected item ??
        // None of the below is working
        console.log(this.dev_choice)
        var choice = $("input[name='dev_choice']:checked")
        console.log(choice)
    }

  </script>
</sample>

RiotJs似乎将用于创建循环的对象绑定到html对象。但是，我没有看到任何方法从另一个函数访问此对象。任何线索都会受到欢迎！

更一般地说，如何从this.techs访问$('sample')？

http://plnkr.co/edit/2ZuIF4iZQ1WS2CuOOiQb

上的完整运行示例

Answer 1

选择选项时，使用select_tech变量获取引用。

<sample>
  <h2>{ message }</h2>

  <ul>
    <li each={ techs }>
        <input 
            type='radio' 
            name='dev_choice' 
            value={ name }
            onclick={ check_choice }>
                { name }
        </input>
    </li>
  </ul>

  <button onclick={ check_selection }>Check</button>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML', rank: '10' },
      { name: 'JavaScript', rank: '20' },
      { name: 'CSS', rank: '30' }
    ]
    this.selected_tech = {}

    check_choice(e) {
        this.selected_tech = e.item
    }
    check_selection(e) {
        console.log(this.selected_tech.rank)
    }

  </script>
</sample>

更新的例子 http://plnkr.co/edit/yfR4v1N4TKi8dH42Poy9?p=preview

Answer 2

我正在使用闭包来解决这类问题

<sample>
  <h2>{ message }</h2>

  <ul>
    <li each={ techs }>
        <input 
            type='radio' 
            name='dev_choice' 
            value={ name }
            checked={currentRank === rank}
            onclick={ check_choice(rank) }>
                { name }
        </input>
    </li>
  </ul>

  <button onclick={ check_selection }>Check</button>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML', rank: '10' },
      { name: 'JavaScript', rank: '20' },
      { name: 'CSS', rank: '30' }
    ]
    // Use this line if you want no radio checked
    // this.currentRank = void 0
    // Use this line if you want a default value
    this.currentRank = '30'

    check_choice(rank) {
        return () => {
          this.currentRank = rank
        }
    }
    check_selection() {
        alert(this.currentRank)
    }

  </script>
</sample>

请检查我的前叉http://plnkr.co/edit/TUvaWnL8glRWCoBi549g?p=preview

Answer 3

我添加了一个属性，但这看起来很混乱： http://plnkr.co/edit/s1n5EGzrODTw8vCEtWIv?p=preview

<sample>
  <h2>{ message }</h2>

  <ul>
    <li each={ techs }>
        <input 
            type='radio' 
            name='dev_choice' 
            value={ name }
            data-rank={rank}
            onclick={ check_choice }>
                { name }
        </input>
    </li>
  </ul>

  <button onclick={ check_selection }>Check</button>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML', rank: '10' },
      { name: 'JavaScript', rank: '20' },
      { name: 'CSS', rank: '30' }
    ]


    check_selection(e) {
        alert($("input[name='dev_choice']:checked").attr('data-rank'))

    }

  </script>
</sample>

Answer 4

您只需使用javascript即可找到所选内容，请检查我的前叉示例http://plnkr.co/edit/lgw4TwfJWF5sAEUN4M3s?p=preview

<sample>
  <h2>{ message }</h2>
  <p>Check your console!</p>

  <ul>
    <li each={ techs }>
      <input 
        type='radio' 
        name='dev_choice' 
        value={ name }
        onclick={ check_choice }>
        { name }
      </input>
    </li>
  </ul>

  <button onclick={ check_selection }>Check</button>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML', rank: '10' },
      { name: 'JavaScript', rank: '20' },
      { name: 'CSS', rank: '30' }
    ]

    check_choice(e) {
      console.log(e.item.rank)
    }
    check_selection(e) {
      const input = this.dev_choice.find(input => input.checked)
      if (input) console.log(input, input.value)
    }
  </script>
</sample>

Answer 5

我100％确定你想要什么，但我解释你想要获得所选对象的技术的完整对象（具有名称和等级）。如果是这样，我将做的是Plnkr）

基本上我添加一个var来获取所选项目以供以后访问。

    var selectedTech = null

    check_choice(e) {
        selectedTech = e.item
    }
    check_selection(e) {
        alert(JSON.stringify(selectedTech))
    }

其他一切都是一样的。

希望这有帮助。

RiotJs - 如何使用每个= {}来访问RiotJs的对象绑定？

5 个答案: