javascript - 何时(或如何)使用 RactiveJS 设置 jQuery 事件处理程序？

Question

我有一个主要用 jQuery 编写的普通客户端应用程序。我在一个特定页面上使用 Ractive，它非常有用。然而，所有旧的 jQuery 事件都不再附加，可能是因为在 Ractive 初始化后 DOM 已重新渲染。我尝试在 Ractive 渲染后设置事件，但这导致了一些奇怪的行为，丢失了 DOM 元素和其他东西。我在哪里可以设置那些旧的 jQuery 处理程序，或者是否可以？ Ractive 渲染是否异步发生，如果是，是否有我应该监听的事件？

我已经尝试过

$('.button').click(someHandler);  // <--- Here

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
});

和

getData(function(data){
    ractive = new Ractive({
        el: '.content',
        template: template,
        data: data
    });
    $('.button').click(someHandler); // <--- Also here
});

Answer 1

除了 Rich 建议使用 Ractive 的事件处理(这与 Ractive 的处理方式最一致)之外，您还可以使用完整的选项:

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    complete: function(){
        $('.button').click(...)

        // or better, use ractive's selector 
        // to limit search to the template.
        // You could use this outside of `complete`
        // as well.
        $( this.find('.button') ).click(...)
    }
});

您可以声明性地使用装饰器来了解元素何时创建(和销毁)，并获得对它的引用，而不是四处寻找元素。在您的模板中:

<button decorator='initbutton'/>

然后在代码中:

ractive = new Ractive({
    el: '.content',
    template: template,
    data: data,
    decorators: {
        initbutton: function(node){
            var $button = $(node)
            $button.on('click', ...)

            return { teardown: function(){ 
                //if you need to do anything to teardown...
                $button.off('click', ...) 
            }
        }
    }
});