开发者问题收集

无法触发事件“未捕获的 ReferenceError:未定义 killMedia”

2016-10-03
827

我正在使用 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>
2个回答

您用来定义函数 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 一无所知。

sethro
2016-10-03

我将其添加为注释,但现在我有时间来实现它。 我认为这不起作用,因为您尝试动态加载元素,因此 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>
vitomd
2016-10-03