Question

我正在使用Riot.js制作网络杂志的WYSIWYG编辑器。当我点击添加按钮时，我想用删除图标显示instagram图像，当我点击删除图标时删除instagram图像。

我可以使用删除图标显示instagram图像，但无法删除它们，因为函数killMedia不起作用。当我点击删除图标时，我收到此错误消息。

未捕获的ReferenceError：未定义killMedia

我正在处理下面的代码。有谁知道问题是什么？

<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>

Answer 1

用于定义函数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如何调用事件函数一无所知，因此，由于您在this函数中使用killMedia，您可能需要绑定正确的声明它时函数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的特殊声明，您可能只需要在 killMedia之前声明addInstagram ，即将该函数移到addInstagram以上。这只是猜测，因为我对Riot.js一无所知。

Answer 2

我将此作为评论添加，但现在我有时间实现这一点。我认为这是行不通的，因为你试图动态加载元素，所以不是由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>

无法触发事件“Uncaught ReferenceError：killMedia未定义”

2 个答案: