将 onclick 函数添加到 riotjs 元素中的输入标签

Question

从这个工作元素开始，sans-js：http://jsfiddle.net/37z1z7g1/

<star-rating></star-rating>
<script type="riot/tag">
  <star-rating>
    <div class="star-rating">
      <input class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" checked="checked" />
      <input class="rb1" id="Ans_2" name="numericRating" type="radio" value="1" />
      <input class="rb2" id="Ans_3" name="numericRating" type="radio" value="2" />
      <input class="rb3" id="Ans_4" name="numericRating" type="radio" value="3" />
      <input class="rb4" id="Ans_5" name="numericRating" type="radio" value="4" />
      <input class="rb5" id="Ans_6" name="numericRating" type="radio" value="5" />
      <input class="rb6" id="Ans_7" name="numericRating" type="radio" value="6" />
      <input class="rb7" id="Ans_8" name="numericRating" type="radio" value="7" />
      <input class="rb8" id="Ans_9" name="numericRating" type="radio" value="8" />
      <input class="rb9" id="Ans_10" name="numericRating" type="radio" value="9" />
      <input class="rb10" id="Ans_11" name="numericRating" type="radio" value="10" />
      <label for="Ans_1" class="star rb0l"></label>
      <label for="Ans_2" class="star rb1l"></label>
      <label for="Ans_3" class="star rb2l"></label>
      <label for="Ans_4" class="star rb3l"></label>
      <label for="Ans_5" class="star rb4l"></label>
      <label for="Ans_6" class="star rb5l"></label>
      <label for="Ans_7" class="star rb6l"></label>
      <label for="Ans_8" class="star rb7l"></label>
      <label for="Ans_9" class="star rb8l"></label>
      <label for="Ans_10" class="star rb9l"></label>
      <label for="Ans_11" class="star rb10l last"></label>
      <div class="rating"></div>
      <div class="rating-bg"></div>
    </div>
  </star-rating>
</script>

请注意，如果您单击其中一颗星星，它会保留所选星星数量的“值”（单击星星 4，失去鼠标焦点后，前 4 颗星星将保持选中状态）。

这就是当我添加一些 js 逻辑成为运行时我最终得到的结果（为了 JSFiddle 的目的，用 console.log 替换了对父函数的调用): http://jsfiddle.net/0u5oLyp5/

    function update(e) {
      this.score = parseInt(e.target.value)/2;
      if (this.score) {
        //parent.UpdateScore(this.score);
          console.log(this.score);
      }
        return true;
    }

[连同

onclick="{ update }"

添加到每个标签元素]

我这里有两个问题：

1) 请注意，我在“update(e)”声明之前放置了函数一词，这与 https://muut.com/riotjs 指南中的所有示例相反，因为如果我不这样做然后我得到

Uncaught TypeError: Cannot read property ‘target’ of undefined

因为它似乎是运行在页面加载时启用函数，而“e”尚未定义，而不仅仅是声明函数。我发现这很奇怪，但我不确定哪里出错了。

2) 即使我的更新函数末尾有“return true”（以重新启用默认事件），单击星号也不再保留以蓝色突出显示的选择它失去了鼠标焦点。一旦我从每个标签元素中删除“onclick='{ update }'”，选择就会再次起作用，所以这肯定是我没有成功触发默认事件处理程序的问题。

有没有人能指出我哪里出错了？

Answer 1

看来问题是我将函数命名为 "update"，这也是所有 Riot 元素中固有的内部更新函数的名称。

update 在挂载过程中通常是运行因此我查询的第 1 点出现错误，因为我在挂载过程中运行时覆盖了默认更新函数，没有传递任何事件in.因此没有'target'的undefined。这意味着一旦我将函数名称从 "update()" 更改为 "StarsChanged".

，我就不需要在声明之前使用 "function()"

这也解决了我遇到的选择未保留在原位（在查询 2 中）的问题。走我。

将 onclick 函数添加到 riotjs 元素中的输入标签

Adding onclick function to input labels within riotjs element

javascript

riot.js