如何用 Ractive 响应 img load 事件？

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>

如何用 Ractive 响应 img load 事件？

How to respond to img load event with Ractive?

javascript

ractivejs