javascript - RiotJs - 如何使用 each={} 访问 RiotJs 绑定(bind)的对象？

Question

我有这个简单的 <input> radio 用户选择。

<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 似乎将用于创建循环的对象绑定(bind)到 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