javascript - React.js + 显示板

Question

我似乎不明白为什么我不能垃圾邮件点击我的“创建板”按钮并继续创建板当我添加一 block 板时，新的空板字典应该添加到数组的前面，但只会显示一 block 板，然后就不会再出现了。感谢您的帮助!!!

<div id="target"></div>

<script id="template" type="text/ractive">


<button class="btn btn-primary" on-click="add_board"><i class="fa fa-plus"></i>  Board</button>
<br><br>

editing: {% editing %}


{% #board_list:title %}
    {% title %}
{% /board_list %}


<div class="board_list">
    {% #board_list:name %}
        <div class="board">
              {% #if editing %}
                <textarea id="editarea" on-blur="editdone" data-areaid="3" value="{% text %}"></textarea>
              {% else %}
                <div on-click="startedit"><p>{% text %}</p></div>
              {% /if %}
        </div>
    {% /board_list %}
</div>

</script>



<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>



<script>
$(function() {
  // Ractive object
  var MAIN = new Ractive({
    el: '#target',
    template: '#template',
    delimiters: ['{%', '%}'],
    tripleDelimiters: ['{%%', '%%}'],
    data: {
        editing: false,
        board_id: -1,
        text: "Edit Me",
        board_list: [],
        loading: false
    },
  });









MAIN.on("add_board", function() {
    board_list = MAIN.get('board_list');
    alert(board_list);
    var empty_board = {title: ''};
    board_list.splice(0, 1, empty_board);
    MAIN.set('board_list', board_list);
});


MAIN.on("startedit", function() {
MAIN.set("editing", true);
$("#editarea").focus();
});

MAIN.on("editdone", function() {
  MAIN.set("editing", false);
  var text = MAIN.get("text");
  alert(text);
  if (text.trim().length > 0) {
      //update_board()
      alert('not empty');
  }
  else {
      //delete_board()
      alert('empty');
  }
});

Answer 1

splice 中的第二个参数是要删除的元素数量，当前将其设置为删除 1。如果将其更改为 0，则会添加更多元素。

board_list.splice(0, 0, empty_board);

https://jsfiddle.net/6qz84476/