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

时间:2016-10-26 08:24:40

标签: javascript riotjs

我有这个简单的<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

上的完整运行示例

5 个答案:

答案 0 :(得分:2)

选择选项时,使用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

答案 1 :(得分: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

答案 2 :(得分:1)

我添加了一个属性,但这看起来很混乱: 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>

答案 3 :(得分:1)

您只需使用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>

答案 4 :(得分:0)

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

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

    var selectedTech = null

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

其他一切都是一样的。

希望这有帮助。