我将数据插入到 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 中实现此功能?
最佳答案
您试图在运行时更新标签定义,但不受支持 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 检查这个 fiddle https://jsfiddle.net/vitomd/1b2m7xec/6/
关于javascript - Uncaught ReferenceError : function is not defined error when calling riot function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39410067/