0

次のように HTML にデータを挿入しました。

<p each="{this.holidayListFirstPart}" if="{hdate}">
    <span id="{description}" onclick={showInputBox}>{hdate}:{description}</span>
</p>

ユーザーが次のようにテキストを編集できるように、spanタグをマウスクリック時に変換しようとしています。textarea

showInputBox(e) {
    self.textContent = document.getElementById(e.target.id).innerHTML;

    var mySpan = document.getElementById(e.target.id);
    var customTextArea = document.createElement("textarea");
    customTextArea.id = e.target.id;
    customTextArea.setAttribute('onmouseout','{focusGone}');
    customTextArea.innerHTML = self.textContent;
    mySpan.parentNode.replaceChild(customTextArea, mySpan); 
}

focusGone(e){
    console.log("lost focus");
}

問題は、ユーザーがテキストを編集した後にテキストエリアを離れると、focusGone関数が定義されていないというエラーがスローされることです。

Uncaught ReferenceError: focusGone is not defined

これを riotjs で機能させるにはどうすればよいですか?

4

1 に答える 1

1

実行時にタグ定義を更新しようとしていますが、これはサポートされていません https://github.com/riot/riot/issues/1752

しかし、別の方法で同じ結果を得ることができます

<my-tag>
<my-tag>
  <p each="{this.holidayListFirstPart}" if="{hdate}">
        <span show="{!parent.editing}" id="{description}" onclick={showInputBox}>{hdate}:{description}</span>
        <textarea id="editText" onmouseout="{parent.focusGone}" show="{parent.editing}"></textarea>
  </p>

  this.holidayListFirstPart = [{description:'des1', hdate:'123'}, {description:'des2'}]
  this.editing = false

  showInputBox(e) {
      this.editing = !this.editing 
      this.editText.innerText = e.currentTarget.innerText
  }

  focusGone(e){
    this.editText.innerHTML = e.currentTarget.value
    alert('result: ' + this.editText.innerHTML);
  }
</my-tag>

更新 コメントに基づいてコードを更新しました。アイデアは、必要なデータにアクセスする方法を知ることです。event.currentTarget を使用するか、this.object_id を使用して直接このフィドルを確認してください https://jsfiddle.net/vitomd/1b2m7xec/6/

于 2016-09-09T12:54:14.533 に答える