javascript - 如何用Ractive响应img加载事件？

Question

我有一个图像元素，我想用 Ractive 控制加载事件。 因此，如果出现错误，我可以显示另一张图像。

<img class="someimage" src="{{src}}" />

使用 jQuery 这非常简单，我只写:

$(".someimage").on("load", function(){...});

但是当 Ractive 时我无法让它以同样的方式工作:

<img src="{{src}}" on-load="imageload" />

ractive.on("imageload", function(){
  console.log("image loaded!");
});

我在 MDN 和 Image Element 上做了一些研究似乎没有 load 事件...那么这如何与 jQuery 一起使用？ 我怎样才能让它与 Ractive 一起工作？

Answer 1

您的代码中有一个拼写错误(imageloag 而不是 imageload)。

如果你改变它，它就会正常工作。看:

var ractive = new Ractive({
   el: 'container',
   template: '#myTemplate',
   data: {
     src: 'http://www.spacebrindes.com/content/interfaces/cms/userfiles/produtos/002x971_bolinha_anti84.jpg'
   }
});

ractive.on('imageload', function(e) {
  console.log('image loaded');
});

<script src="//cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<div id='container'></div>

<script id='myTemplate' type='text/ractive'>
    <img src="{{src}}" on-load="imageload" />
</script>