无法触发事件“未捕获的 ReferenceError:未定义 killMedia”
我正在使用 Riot.js 为网络杂志制作所见即所得编辑器。 我想在单击“添加”按钮时显示带有删除图标的 Instagram 图片,并在单击“删除”图标时删除 Instagram 图片。
我可以显示带有删除图标的 Instagram 图片,但无法删除它们,因为 killMedia 函数不起作用。 当我单击删除图标时,我收到此错误消息。
Uncaught ReferenceError: killMedia is not defined
我正在处理以下代码。 有人知道问题是什么吗?
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>
<label>
<input type='text' name='instagram' placeholder='Input Instagram embed code'>
<button onclick={ addInstagram }>add</button>
</label>
<script>
addInstagram(e) {
var embedCode = this.instagram.value
var instagram = document.createElement('div')
instagram.setAttribute('class', 'media-frame')
instagram.setAttribute('show', '{showMedia}')
instagram.innerHTML = embedCode
var i = document.createElement('i')
i.setAttribute('id', 'media-killer')
i.setAttribute('class', 'fa fa-times-circle-o media-killer')
i.setAttribute('aria-hidden', 'true')
i.setAttribute('show', '{showMedia}')
i.setAttribute('onclick', '{killMedia}')
var target = document.getElementById('body-text')
instagram.appendChild(i)
target.appendChild(instagram)
this.instagram.value = ''
this.update()
this.modal = false
}
this.showMedia = true
killMedia(e) {
this.showMedia = false
this.update()
}
</script>
您用来定义函数
killMedia
的语法不正确。Riot.js 似乎有一些用于事件处理程序的替代语法,这就是它适用于
addInstagram
的原因。
有几种方法可以正确地在 JavaScript 中声明和定义函数。其中一种方法是:
// declare variable killMedia and assign a function to it
var killMedia = function( e ){
this.showMedia = false;
this.update();
}
此外,我不知道 Riot.js 将如何调用事件函数,因此,由于您在
killMedia
函数中使用
this
,您可能需要在声明函数时将正确的
this
绑定到该函数。实现此目的的一种方法是使用
bind
函数:
// declare variable killMedia and assign a function to it
var killMedia = function( e ){
this.showMedia = false;
this.update();
}.bind( this );
如果语法不是问题,并且 Riot.js 正在处理
killMedia
的特殊声明,您可能只需要在
addInstagram
之前声明
killMedia
,即将该函数移到
addInstagram
上方。这只是猜测,因为我对 Riot.js 一无所知。
我将其添加为注释,但现在我有时间来实现它。 我认为这不起作用,因为您尝试动态加载元素,因此 Riot 编译器不会对其进行编译。
执行您想要的操作的更 Riot.js 方法是构建另一个名为 instagram_image 的标签,您可以将其删除,并有一个数组来迭代父标签中的图像。
我简化了您的代码,但想法是这样的: (这里是 plunker 版本 http://plnkr.co/edit/EmkFhq0OyVtwSNIJqeJF?p=preview )
<my-tag>
<span each={img in instagram_images} >
<instagram_image embed_code={img.embed_code}></instagram_image>
</span>
<label>
<input type='text' name='instagram' placeholder='Input Instagram embed code'>
<button onclick={ addInstagram }>add</button>
</label>
<script>
this.instagram_images = []
addInstagram(e) {
var instagram_image = {embed_code: this.instagram.value}
this.instagram_images.push(instagram_image)
this.instagram.value = ''
}
</script>
</my-tag>
<instagram_image>
<div onclick={remove}>
{opts.embed_code}
</div>
<script>
this.remove = function() {
this.unmount()
this.update()
}
</script>
</instagram_image>